@ankhorage/zora 12.0.0 → 13.0.0

package/src/features/accordion/adapters/inbound/AccordionItem.tsx

@@ -0,0 +1,86 @@
+import {
+  AccordionContent as SurfaceAccordionContent,
+  AccordionItem as SurfaceAccordionItem,
+  AccordionTrigger as SurfaceAccordionTrigger,
+} from '@ankhorage/surface';
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { AccordionItemProps } from '../../../../types/accordion';
+import { Icon } from '../../../icon/public';
+import { Box, Divider, Stack } from '../../../layout/public';
+import { Heading, Text } from '../../../typography/public';
+import { AccordionPresentationContext } from '../../composition/AccordionPresentationContext';
+
+/*** Renders one opinionated ZORA accordion item over Surface trigger/content primitives. */
+export const AccordionItem = withZoraThemeScope(AccordionItemInner);
+
+const triggerStyle: ViewStyle = { flex: 1 };
+
+/*** Composes the item header, optional actions, expanded content, and separator. */
+function AccordionItemInner({
+  themeId: _themeId,
+  mode: _mode,
+  actions,
+  children,
+  description,
+  disabled,
+  icon,
+  interactionPolicy,
+  testID,
+  title,
+  value,
+  ...surfaceItemProps
+}: AccordionItemProps) {
+  const presentation = React.useContext(AccordionPresentationContext);
+  if (!presentation) {
+    throw new Error('AccordionItem must be rendered inside Accordion.');
+  }
+
+  const open = presentation.openValues.includes(value);
+
+  return (
+    <SurfaceAccordionItem
+      {...surfaceItemProps}
+      disabled={disabled}
+      interactionPolicy={interactionPolicy}
+      testID={testID}
+      value={value}
+    >
+      <Stack gap="none">
+        <Stack align="center" direction="row" gap="s">
+          <Box flex={1}>
+            <SurfaceAccordionTrigger interactionPolicy={interactionPolicy} style={triggerStyle}>
+              <Box px="m" py="m">
+                <Stack align="center" direction="row" gap="m">
+                  {icon ? <Icon {...icon} /> : null}
+                  <Box flex={1}>
+                    <Stack gap="xs">
+                      <Heading level={4}>{title}</Heading>
+                      {description ? (
+                        <Text emphasis="muted" variant="bodySmall">
+                          {description}
+                        </Text>
+                      ) : null}
+                    </Stack>
+                  </Box>
+                  <Icon name={open ? 'chevron-up-outline' : 'chevron-down-outline'} size="m" />
+                </Stack>
+              </Box>
+            </SurfaceAccordionTrigger>
+          </Box>
+          {actions ? <Box pr="m">{actions}</Box> : null}
+        </Stack>
+
+        <SurfaceAccordionContent>
+          <Box px="m" pb="m">
+            <Stack gap="m">{children}</Stack>
+          </Box>
+        </SurfaceAccordionContent>
+
+        <Divider />
+      </Stack>
+    </SurfaceAccordionItem>
+  );
+}

package/src/features/accordion/composition/AccordionPresentationContext.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+import type { AccordionPresentationContextValue } from '../../../types/accordion';
+
+export const AccordionPresentationContext =
+  React.createContext<AccordionPresentationContextValue | null>(null);

package/src/features/accordion/public.ts

@@ -0,0 +1,9 @@
+export type {
+  AccordionItemProps,
+  AccordionMode,
+  AccordionMultipleProps,
+  AccordionProps,
+  AccordionSingleProps,
+} from '../../types/accordion';
+export { Accordion } from './adapters/inbound/Accordion';
+export { AccordionItem } from './adapters/inbound/AccordionItem';

package/src/{patterns/auth → features/auth/adapters/inbound}/AuthForm.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 
-import { FormActions, FormError, useFormController } from '../../features/form/public';
-import { Stack } from '../../features/layout/public';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import type { FormErrors, FormFieldConfig, FormValues } from '../../types/form';
+import type { ZoraBaseProps } from '../../../../theme/ZoraBaseProps';
+import type { FormErrors, FormFieldConfig, FormValues } from '../../../../types/form';
+import { FormActions, FormError, useFormController } from '../../../form/public';
+import { Stack } from '../../../layout/public';
 import { AuthFormField } from './AuthFormField';
 
 interface AuthFormProps<TName extends string> {
   fields: readonly FormFieldConfig<TName>[];
   values: FormValues<TName>;
   onChange: (values: FormValues<TName>) => void;
-  onSubmit: (values: FormValues<TName>) => void | Promise<void>;
+  onSubmit?: (values: FormValues<TName>) => void | Promise<void>;
   errors?: FormErrors<TName>;
   error?: React.ReactNode;
   loading?: boolean;

package/src/{patterns/auth → features/auth/adapters/inbound}/AuthFormField.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { FormField, hasRequiredRule } from '../../features/form/public';
-import { TextInput } from '../../features/form/text-input/public';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import type { FormFieldConfig, FormFieldValue } from '../../types/form';
+import type { ZoraBaseProps } from '../../../../theme/ZoraBaseProps';
+import type { FormFieldConfig, FormFieldValue } from '../../../../types/form';
+import { FormField, hasRequiredRule } from '../../../form/public';
+import { TextInput } from '../../../form/text-input/public';
 
 interface AuthFormFieldProps<TName extends string> {
   field: FormFieldConfig<TName>;

package/src/{patterns/auth → features/auth/adapters/inbound}/ForgotPasswordForm.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 
-import { Button } from '../../features/button/public';
-import { Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { FormFieldConfig, FormValues } from '../../types/form';
-import { AuthForm } from './AuthForm';
-import type { ForgotPasswordFormProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ForgotPasswordFormProps } from '../../../../types/auth';
+import type { FormFieldConfig, FormValues } from '../../../../types/form';
+import { Button } from '../../../button/public';
+import { Stack } from '../../../layout/public';
 import {
   defaultIdentifiers,
   normalizeIdentifierKind,
   resolveIdentifierLabel,
   resolveIdentifierRules,
   resolveIdentifierType,
-} from './utils';
+} from '../../utils/authForm';
+import { AuthForm } from './AuthForm';
 
 type ForgotPasswordFieldName = 'identifier';
 
@@ -49,7 +49,7 @@ function ForgotPasswordFormInner({
 
   const handleSubmit = React.useCallback(
     (formValues: FormValues<ForgotPasswordFieldName>) =>
-      onSubmit({
+      onSubmit?.({
         identifier: formValues.identifier.trim(),
         identifierKind: normalizeIdentifierKind(formValues.identifier, identifiers),
       }),

package/src/{patterns/auth → features/auth/adapters/inbound}/OAuthProviderButton.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Button } from '../../features/button/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { resolveOAuthProviderIcon, resolveOAuthProviderLabel } from './oauthProviders';
-import type { OAuthProviderButtonProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { OAuthProviderButtonProps } from '../../../../types/auth';
+import { Button } from '../../../button/public';
+import { resolveOAuthProviderIcon, resolveOAuthProviderLabel } from '../../utils/oauthProviders';
 
 function OAuthProviderButtonInner({
   themeId: _themeId,

package/src/{patterns/auth → features/auth/adapters/inbound}/OAuthProviderList.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { OAuthProviderListProps } from '../../../../types/auth';
+import { Stack } from '../../../layout/public';
 import { OAuthProviderButton } from './OAuthProviderButton';
-import type { OAuthProviderListProps } from './types';
 
 function OAuthProviderListInner({
   themeId: _themeId,

package/src/{patterns/auth → features/auth/adapters/inbound}/OtpForm.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { Button } from '../../features/button/public';
-import { Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { FormFieldConfig, FormValues } from '../../types/form';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { OtpFormProps } from '../../../../types/auth';
+import type { FormFieldConfig, FormValues } from '../../../../types/form';
+import { Button } from '../../../button/public';
+import { Stack } from '../../../layout/public';
 import { AuthForm } from './AuthForm';
-import type { OtpFormProps } from './types';
 
 type OtpFieldName = 'otp';
 
@@ -45,7 +45,7 @@ function OtpFormInner({
 
   const handleSubmit = React.useCallback(
     (formValues: FormValues<OtpFieldName>) =>
-      onSubmit({
+      onSubmit?.({
         otp: formValues.otp.trim(),
       }),
     [onSubmit],

package/src/{patterns/auth → features/auth/adapters/inbound}/SignInForm.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 
-import { Button } from '../../features/button/public';
-import { Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { FormFieldConfig, FormValues } from '../../types/form';
-import { AuthForm } from './AuthForm';
-import type { SignInFormProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { SignInFormProps } from '../../../../types/auth';
+import type { FormFieldConfig, FormValues } from '../../../../types/form';
+import { Button } from '../../../button/public';
+import { Stack } from '../../../layout/public';
 import {
   defaultIdentifiers,
   normalizeIdentifierKind,
   resolveIdentifierLabel,
   resolveIdentifierRules,
   resolveIdentifierType,
-} from './utils';
+} from '../../utils/authForm';
+import { AuthForm } from './AuthForm';
 
 type SignInFieldName = 'identifier' | 'secret';
 
@@ -60,7 +60,7 @@ function SignInFormInner({
 
   const handleSubmit = React.useCallback(
     (formValues: FormValues<SignInFieldName>) =>
-      onSubmit({
+      onSubmit?.({
         identifier: formValues.identifier.trim(),
         identifierKind: normalizeIdentifierKind(formValues.identifier, identifiers),
         secret: formValues.secret,

package/src/{patterns/auth → features/auth/adapters/inbound}/SignUpForm.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { Button } from '../../features/button/public';
-import { Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { FormFieldConfig, FormValues } from '../../types/form';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { SignUpFormProps } from '../../../../types/auth';
+import type { FormFieldConfig, FormValues } from '../../../../types/form';
+import { Button } from '../../../button/public';
+import { Stack } from '../../../layout/public';
 import { AuthForm } from './AuthForm';
-import type { SignUpFormProps } from './types';
 
 const defaultSignUpFields = [
   {

package/src/features/auth/forgotPasswordFormMeta.ts

@@ -0,0 +1,49 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const forgotPasswordFormMeta = {
+  name: 'ForgotPasswordForm',
+  category: 'pattern',
+  description: 'Collects an account identifier to start password recovery.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Forgot password form',
+    defaultProps: {
+      identifiers: ['email'],
+      identifierLabel: 'Email',
+      signInLabel: 'Sign in',
+      submitLabel: 'Send code',
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    submit: {
+      label: 'Submit',
+      eventType: 'forgotPasswordForm.submit',
+      payloadFields: [
+        { path: 'identifier', type: 'string', label: 'Identifier' },
+        { path: 'identifierKind', type: 'string', label: 'Identifier kind' },
+      ],
+    },
+    signIn: {
+      label: 'Sign in',
+      eventType: 'forgotPasswordForm.signIn',
+      payloadFields: [],
+    },
+  },
+  props: {
+    identifiers: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Identifiers',
+      default: ['email'],
+    },
+    identifierLabel: { type: 'string', category: 'Content', label: 'Identifier label' },
+    signInLabel: { type: 'string', category: 'Content', label: 'Sign-in label' },
+    submitLabel: { type: 'string', category: 'Content', label: 'Submit label' },
+    error: { type: 'string', category: 'State', label: 'Error' },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/oauthProviderButtonMeta.ts

@@ -0,0 +1,62 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const oauthProviderButtonMeta = {
+  name: 'OAuthProviderButton',
+  category: 'pattern',
+  description: 'Renders a provider-branded OAuth action button.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'OAuth provider button',
+    defaultProps: {
+      providerId: 'google',
+      fullWidth: true,
+      size: 'l',
+      variant: 'outline',
+      color: 'neutral',
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    press: {
+      label: 'Press',
+      eventType: 'oauthProviderButton.press',
+      payloadFields: [{ path: 'providerId', type: 'string', label: 'Provider ID' }],
+    },
+  },
+  props: {
+    providerId: {
+      type: 'string',
+      category: 'Authentication',
+      label: 'Provider ID',
+      default: 'google',
+    },
+    label: { type: 'string', category: 'Content', label: 'Label' },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    fullWidth: { type: 'boolean', category: 'Layout', label: 'Full width', default: true },
+    size: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Size',
+      enum: ['s', 'm', 'l'],
+      default: 'l',
+    },
+    variant: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Variant',
+      enum: ['solid', 'outline', 'ghost', 'soft'],
+      default: 'outline',
+    },
+    color: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Color',
+      enum: [...ZORA_COLORS],
+      default: 'neutral',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/oauthProviderListMeta.ts

@@ -0,0 +1,67 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const oauthProviderListMeta = {
+  name: 'OAuthProviderList',
+  category: 'pattern',
+  description: 'Renders a configurable group of OAuth provider actions.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'OAuth provider list',
+    defaultProps: {
+      providers: [{ id: 'google', label: 'Continue with Google' }],
+      layout: 'stack',
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    providerPress: {
+      label: 'Provider press',
+      eventType: 'oauthProviderList.providerPress',
+      payloadFields: [{ path: 'providerId', type: 'string', label: 'Provider ID' }],
+    },
+  },
+  props: {
+    providers: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Providers',
+      itemSchema: [
+        { key: 'id', schema: { type: 'string', category: 'Identity', label: 'Provider ID' } },
+        { key: 'label', schema: { type: 'string', category: 'Content', label: 'Label' } },
+        { key: 'disabled', schema: { type: 'boolean', category: 'State', label: 'Disabled' } },
+        { key: 'loading', schema: { type: 'boolean', category: 'State', label: 'Loading' } },
+      ],
+    },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    fullWidth: { type: 'boolean', category: 'Layout', label: 'Full width' },
+    layout: {
+      type: 'enum',
+      category: 'Layout',
+      label: 'Layout',
+      enum: ['stack', 'inline'],
+      default: 'stack',
+    },
+    size: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Size',
+      enum: ['s', 'm', 'l'],
+    },
+    variant: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Variant',
+      enum: ['solid', 'outline', 'ghost', 'soft'],
+    },
+    color: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Color',
+      enum: [...ZORA_COLORS],
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/otpFormMeta.ts

@@ -0,0 +1,55 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const otpFormMeta = {
+  name: 'OtpForm',
+  category: 'pattern',
+  description: 'Collects and verifies a one-time passcode with an optional resend action.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'OTP form',
+    defaultProps: {
+      length: 6,
+      otpLabel: 'Code',
+      resendLabel: 'Resend code',
+      submitLabel: 'Verify code',
+      resendDisabled: false,
+      resendLoading: false,
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    submit: {
+      label: 'Submit',
+      eventType: 'otpForm.submit',
+      payloadFields: [{ path: 'otp', type: 'string', label: 'One-time passcode' }],
+    },
+    resend: {
+      label: 'Resend',
+      eventType: 'otpForm.resend',
+      payloadFields: [],
+    },
+  },
+  props: {
+    length: { type: 'number', category: 'Validation', label: 'Code length', default: 6 },
+    otpLabel: { type: 'string', category: 'Content', label: 'Code label' },
+    resendLabel: { type: 'string', category: 'Content', label: 'Resend label' },
+    submitLabel: { type: 'string', category: 'Content', label: 'Submit label' },
+    error: { type: 'string', category: 'State', label: 'Error' },
+    resendDisabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Resend disabled',
+      default: false,
+    },
+    resendLoading: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Resend loading',
+      default: false,
+    },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/auth/public.test.ts

@@ -0,0 +1,34 @@
+import { expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
+
+const AUTH_MANIFEST_ELEMENTS = [
+  'ForgotPasswordForm',
+  'OAuthProviderButton',
+  'OAuthProviderList',
+  'OtpForm',
+  'SignInForm',
+  'SignUpForm',
+] as const;
+const authMetaByName = new Map(Object.entries(ZORA_COMPONENT_META));
+
+test('auth solutions are direct manifest leaf nodes with authoring schemas', () => {
+  for (const name of AUTH_MANIFEST_ELEMENTS) {
+    const meta = authMetaByName.get(name);
+    expect(meta?.directManifestNode, name).toBe(true);
+    expect(meta?.allowedChildren, name).toEqual([]);
+    expect(Object.keys(meta?.props ?? {}).length, name).toBeGreaterThan(0);
+  }
+});
+
+test('auth solution events expose their actionable boundaries', () => {
+  expect(ZORA_COMPONENT_META.SignInForm?.events?.submit?.payloadFields).toContainEqual({
+    path: 'secret',
+    type: 'string',
+    label: 'Secret',
+  });
+  expect(ZORA_COMPONENT_META.OtpForm?.events?.resend?.eventType).toBe('otpForm.resend');
+  expect(ZORA_COMPONENT_META.OAuthProviderList?.events?.providerPress?.payloadFields).toEqual([
+    { path: 'providerId', type: 'string', label: 'Provider ID' },
+  ]);
+});

package/src/{patterns/auth/index.ts → features/auth/public.ts}

@@ -1,14 +1,3 @@
-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';
 export type {
   AuthFormBaseProps,
   AuthIdentifierKind,
@@ -26,4 +15,15 @@ export type {
   SignUpFormField,
   SignUpFormProps,
   SignUpFormValues,
-} from './types';
+} from '../../types/auth';
+export { ForgotPasswordForm } from './adapters/inbound/ForgotPasswordForm';
+export { OAuthProviderButton } from './adapters/inbound/OAuthProviderButton';
+export { OAuthProviderList } from './adapters/inbound/OAuthProviderList';
+export { OtpForm } from './adapters/inbound/OtpForm';
+export { SignInForm } from './adapters/inbound/SignInForm';
+export { SignUpForm } from './adapters/inbound/SignUpForm';
+export {
+  DEFAULT_OAUTH_PROVIDER_ICONS,
+  resolveOAuthProviderIcon,
+  resolveOAuthProviderLabel,
+} from './utils/oauthProviders';

package/src/features/auth/signInFormMeta.ts

@@ -0,0 +1,63 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const signInFormMeta = {
+  name: 'SignInForm',
+  category: 'pattern',
+  description: 'Collects an account identifier and secret for sign-in.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Sign-in form',
+    defaultProps: {
+      identifiers: ['email'],
+      identifierLabel: 'Email',
+      secretLabel: 'Password',
+      forgotPasswordLabel: 'Forgot password',
+      signUpLabel: 'Sign up',
+      submitLabel: 'Sign in',
+      loading: false,
+      disabled: false,
+    },
+  },
+  events: {
+    submit: {
+      label: 'Submit',
+      eventType: 'signInForm.submit',
+      payloadFields: [
+        { path: 'identifier', type: 'string', label: 'Identifier' },
+        { path: 'identifierKind', type: 'string', label: 'Identifier kind' },
+        { path: 'secret', type: 'string', label: 'Secret' },
+      ],
+    },
+    forgotPassword: {
+      label: 'Forgot password',
+      eventType: 'signInForm.forgotPassword',
+      payloadFields: [],
+    },
+    signUp: {
+      label: 'Sign up',
+      eventType: 'signInForm.signUp',
+      payloadFields: [],
+    },
+  },
+  props: {
+    identifiers: {
+      type: 'array',
+      category: 'Authentication',
+      label: 'Identifiers',
+      default: ['email'],
+    },
+    identifierLabel: { type: 'string', category: 'Content', label: 'Identifier label' },
+    secretLabel: { type: 'string', category: 'Content', label: 'Secret label' },
+    forgotPasswordLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'Forgot-password label',
+    },
+    signUpLabel: { type: 'string', category: 'Content', label: 'Sign-up label' },
+    submitLabel: { type: 'string', category: 'Content', label: 'Submit label' },
+    error: { type: 'string', category: 'State', label: 'Error' },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+  },
+} as const satisfies ZoraComponentMeta;