@ankhorage/zora 0.3.6 → 0.3.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.3.7
+
+### Patch Changes
+
+- e9d563b: Export src/ for better Metro debugging
+
 ## 0.3.6
 
 ### Patch Changes

package/README.md

@@ -1158,96 +1158,6 @@ const zoraTheme: ThemeConfig = {
 
 </details>
 
-## Public Exports
-
-Add `AppShell` to the public exports:
-
-```ts
-export {
-  AppShell,
-  AuthLayout,
-  Badge,
-  Button,
-  Card,
-  CollectionEditor,
-  ConfirmDialog,
-  createZoraTheme,
-  DisclosureSection,
-  Drawer,
-  EmptyState,
-  FormField,
-  IconButton,
-  Input,
-  InspectorField,
-  Modal,
-  Notice,
-  Page,
-  PageHeader,
-  PageSection,
-  PaletteItem,
-  Panel,
-  ResponsivePanel,
-  SectionHeader,
-  Select,
-  SettingsLayout,
-  SettingsRow,
-  SidebarLayout,
-  SwitchField,
-  Tabs,
-  Textarea,
-  TileGrid,
-  Toolbar,
-  ToolbarAction,
-  TopbarLayout,
-  TreeView,
-  ZoraProvider,
-  zoraTheme,
-};
-```
-
-```ts
-export type {
-  AppShellProps,
-  AuthLayoutProps,
-  BadgeProps,
-  ButtonProps,
-  CardProps,
-  CollectionEditorProps,
-  ConfirmDialogProps,
-  DisclosureSectionProps,
-  DrawerProps,
-  EmptyStateAction,
-  EmptyStateProps,
-  FormFieldProps,
-  IconButtonProps,
-  InputProps,
-  InspectorFieldProps,
-  ModalProps,
-  NoticeProps,
-  PageHeaderProps,
-  PageProps,
-  PageSectionProps,
-  PaletteItemProps,
-  PanelProps,
-  ResponsivePanelProps,
-  SectionHeaderProps,
-  SelectProps,
-  SettingsLayoutProps,
-  SettingsRowProps,
-  SidebarLayoutProps,
-  SwitchFieldProps,
-  TabsProps,
-  TextareaProps,
-  TileGridProps,
-  ToolbarProps,
-  ToolbarActionProps,
-  TopbarLayoutProps,
-  TreeViewProps,
-  ZoraProviderProps,
-  ZoraThemeOverride,
-};
-```
-
 ## Example App
 
 A complete Expo showcase lives in `examples/expo-showcase`. It renders the

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -47,12 +47,16 @@
   },
   "files": [
     "dist",
+    "src",
+    "package.json",
     "README.md",
     "CHANGELOG.md",
     "LICENSE"
   ],
   "exports": {
     ".": {
+      "react-native": "./src/index.ts",
+      "browser": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"

package/src/components/badge/Badge.tsx

@@ -0,0 +1,19 @@
+import { Badge as SurfaceBadge } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveBadgeRecipe } from '../../internal/recipes';
+import type { BadgeProps } from './types';
+
+export function Badge({ children, tone, emphasis, size, ...props }: BadgeProps) {
+  const recipe = resolveBadgeRecipe({ tone, emphasis, size });
+
+  return (
+    <SurfaceBadge
+      {...props}
+      content={children}
+      size={recipe.size}
+      tone={recipe.tone}
+      variant={recipe.variant}
+    />
+  );
+}

package/src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './types';

package/src/components/badge/types.ts

@@ -0,0 +1,14 @@
+import type { BadgeProps as SurfaceBadgeProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraBadgeEmphasis, ZoraControlSize, ZoraTone } from '../../internal/recipes';
+
+export interface BadgeProps extends Omit<
+  SurfaceBadgeProps,
+  'content' | 'size' | 'tone' | 'variant'
+> {
+  children?: React.ReactNode;
+  tone?: ZoraTone;
+  emphasis?: ZoraBadgeEmphasis;
+  size?: ZoraControlSize;
+}

package/src/components/button/Button.tsx

@@ -0,0 +1,13 @@
+import { Button as SurfaceButton } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveButtonRecipe } from '../../internal/recipes';
+import type { ButtonProps } from './types';
+
+export function Button({ tone, emphasis, size, ...props }: ButtonProps) {
+  const recipe = resolveButtonRecipe({ tone, emphasis, size });
+
+  return (
+    <SurfaceButton {...props} size={recipe.size} tone={recipe.tone} variant={recipe.variant} />
+  );
+}

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './types';

package/src/components/button/types.ts

@@ -0,0 +1,16 @@
+import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+
+export interface ButtonProps extends Omit<
+  SurfaceButtonProps,
+  'children' | 'size' | 'tone' | 'variant'
+> {
+  children?: React.ReactNode;
+  tone?: ZoraTone;
+  emphasis?: ZoraEmphasis;
+  size?: ZoraControlSize;
+  leadingIcon?: ButtonIconSpec;
+  trailingIcon?: ButtonIconSpec;
+}

package/src/components/card/Card.tsx

@@ -0,0 +1,65 @@
+import { Box, Card as SurfaceCard, Heading, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveCardVariant } from '../../internal/recipes';
+import type { CardProps } from './types';
+
+export function Card({
+  children,
+  title,
+  description,
+  eyebrow,
+  actions,
+  footer,
+  tone = 'default',
+  compact = false,
+  onPress,
+  ...props
+}: CardProps) {
+  const hasHeader = [eyebrow, title, description, actions].some((item) => item != null);
+  const hasFooter = footer !== undefined;
+  const gap = compact ? 's' : 'm';
+  const isInteractive = Boolean(onPress) && !actions;
+
+  return (
+    <SurfaceCard
+      {...props}
+      onPress={isInteractive ? onPress : undefined}
+      p={compact ? 'm' : 'l'}
+      radius="l"
+      variant={resolveCardVariant(tone)}
+    >
+      <Stack gap={gap}>
+        {hasHeader ? (
+          <Stack
+            align={{ base: 'flex-start', md: 'center' }}
+            direction={{ base: 'column', md: 'row' }}
+            gap="m"
+            justify="space-between"
+          >
+            <Box flex={1}>
+              <Stack gap="xs">
+                {eyebrow ? (
+                  <Text tone="muted" variant="caption" weight="semiBold">
+                    {eyebrow}
+                  </Text>
+                ) : null}
+                {title ? <Heading level={compact ? 4 : 3}>{title}</Heading> : null}
+                {description ? (
+                  <Text tone="muted" variant="bodySmall">
+                    {description}
+                  </Text>
+                ) : null}
+              </Stack>
+            </Box>
+            {actions ? <Box>{actions}</Box> : null}
+          </Stack>
+        ) : null}
+
+        {children ? <Box>{children}</Box> : null}
+
+        {hasFooter ? <Box pt="xs">{footer}</Box> : null}
+      </Stack>
+    </SurfaceCard>
+  );
+}

package/src/components/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps } from './types';

package/src/components/card/types.ts

@@ -0,0 +1,15 @@
+import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraCardTone } from '../../internal/recipes';
+
+export interface CardProps extends Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  actions?: React.ReactNode;
+  footer?: React.ReactNode;
+  tone?: ZoraCardTone;
+  compact?: boolean;
+}

package/src/components/drawer/Drawer.tsx

@@ -0,0 +1,27 @@
+import { Box, Drawer as SurfaceDrawer, Heading, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+
+import type { DrawerProps } from './types';
+
+export function Drawer({ children, title, description, footer, ...props }: DrawerProps) {
+  const hasHeader = title != null || description != null;
+
+  return (
+    <SurfaceDrawer {...props}>
+      <Stack gap="m">
+        {hasHeader ? (
+          <Stack gap="xs">
+            {title ? <Heading level={3}>{title}</Heading> : null}
+            {description ? (
+              <Text tone="muted" variant="bodySmall">
+                {description}
+              </Text>
+            ) : null}
+          </Stack>
+        ) : null}
+        {children ? <Box flex={1}>{children}</Box> : null}
+        {footer ? <Box pt="xs">{footer}</Box> : null}
+      </Stack>
+    </SurfaceDrawer>
+  );
+}

package/src/components/drawer/index.ts

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './types';

package/src/components/drawer/types.ts

@@ -0,0 +1,12 @@
+import type { DrawerProps as SurfaceDrawerProps } from '@ankhorage/surface';
+import type React from 'react';
+
+export interface DrawerProps extends Pick<
+  SurfaceDrawerProps,
+  'closeOnBackdrop' | 'onDismiss' | 'position' | 'testID' | 'visible'
+> {
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+}

package/src/components/icon/Icon.tsx

@@ -0,0 +1,8 @@
+import { Icon as SurfaceIcon, type IconProps as SurfaceIconProps } from '@ankhorage/surface';
+import React from 'react';
+
+export type IconProps = SurfaceIconProps;
+
+export function Icon(props: IconProps) {
+  return <SurfaceIcon {...props} />;
+}

package/src/components/icon/index.ts

@@ -0,0 +1,2 @@
+export type { IconProps } from './Icon';
+export { Icon } from './Icon';

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

@@ -0,0 +1,27 @@
+import { IconButton as SurfaceIconButton } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveButtonRecipe } from '../../internal/recipes';
+import type { IconButtonProps } from './types';
+
+export function IconButton({
+  icon,
+  label,
+  emphasis = 'ghost',
+  tone = 'neutral',
+  size = 'm',
+  ...props
+}: IconButtonProps) {
+  const recipe = resolveButtonRecipe({ emphasis, tone, size });
+
+  return (
+    <SurfaceIconButton
+      {...props}
+      icon={icon}
+      accessibilityLabel={label}
+      size={recipe.size}
+      tone={recipe.tone}
+      variant={recipe.variant}
+    />
+  );
+}

package/src/components/icon-button/index.ts

@@ -0,0 +1,2 @@
+export * from './IconButton';
+export * from './types';

package/src/components/icon-button/types.ts

@@ -0,0 +1,15 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+
+import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+
+export interface IconButtonProps {
+  icon: ButtonIconSpec;
+  label: string;
+  emphasis?: ZoraEmphasis;
+  tone?: ZoraTone;
+  size?: ZoraControlSize;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress?: () => void;
+  testID?: string;
+}

package/src/components/input/Input.tsx

@@ -0,0 +1,38 @@
+import { Icon, TextInput as SurfaceTextInput, useTheme } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveIconSize } from '../../internal/recipes';
+import type { InputProps } from './types';
+
+export function Input({ size = 'l', leadingIcon, trailingIcon, ...props }: InputProps) {
+  const { theme } = useTheme();
+  const iconSize = resolveIconSize(size);
+  const iconColor = theme.semantics.content.muted;
+
+  return (
+    <SurfaceTextInput
+      {...props}
+      leadingAccessory={
+        leadingIcon ? (
+          <Icon
+            color={iconColor}
+            name={leadingIcon.name}
+            provider={leadingIcon.provider}
+            size={iconSize}
+          />
+        ) : undefined
+      }
+      size={size}
+      trailingAccessory={
+        trailingIcon ? (
+          <Icon
+            color={iconColor}
+            name={trailingIcon.name}
+            provider={trailingIcon.provider}
+            size={iconSize}
+          />
+        ) : undefined
+      }
+    />
+  );
+}

package/src/components/input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './types';

package/src/components/input/types.ts

@@ -0,0 +1,12 @@
+import type { ButtonIconSpec, TextInputProps as SurfaceTextInputProps } from '@ankhorage/surface';
+
+import type { ZoraControlSize } from '../../internal/recipes';
+
+export interface InputProps extends Omit<
+  SurfaceTextInputProps,
+  'leadingAccessory' | 'size' | 'trailingAccessory'
+> {
+  size?: ZoraControlSize;
+  leadingIcon?: ButtonIconSpec;
+  trailingIcon?: ButtonIconSpec;
+}

package/src/components/modal/Modal.tsx

@@ -0,0 +1,37 @@
+import { Box, Heading, Modal as SurfaceModal, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveDialogWidth } from '../../internal/recipes';
+import type { ModalProps } from './types';
+
+export function Modal({
+  children,
+  title,
+  description,
+  footer,
+  width = 'default',
+  ...props
+}: ModalProps) {
+  const hasHeader = title != null || description != null;
+
+  return (
+    <SurfaceModal {...props}>
+      <Box maxWidth={resolveDialogWidth(width)} style={{ alignSelf: 'center', width: '100%' }}>
+        <Stack gap="m">
+          {hasHeader ? (
+            <Stack gap="xs">
+              {title ? <Heading level={3}>{title}</Heading> : null}
+              {description ? (
+                <Text tone="muted" variant="bodySmall">
+                  {description}
+                </Text>
+              ) : null}
+            </Stack>
+          ) : null}
+          {children ? <Box>{children}</Box> : null}
+          {footer ? <Box pt="xs">{footer}</Box> : null}
+        </Stack>
+      </Box>
+    </SurfaceModal>
+  );
+}

package/src/components/modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps } from './types';

package/src/components/modal/types.ts

@@ -0,0 +1,15 @@
+import type { ModalProps as SurfaceModalProps } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraContentWidth } from '../../internal/recipes';
+
+export interface ModalProps extends Pick<
+  SurfaceModalProps,
+  'closeOnBackdrop' | 'onDismiss' | 'testID' | 'visible'
+> {
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  width?: ZoraContentWidth;
+}

package/src/components/select/Select.tsx

@@ -0,0 +1,49 @@
+import { Box, useTheme } from '@ankhorage/surface';
+import { Picker } from '@react-native-picker/picker';
+import React from 'react';
+
+import type { SelectProps } from './types';
+
+export function Select<TValue extends string = string>({
+  value,
+  options,
+  onValueChange,
+  disabled,
+  invalid,
+  testID,
+}: SelectProps<TValue>) {
+  const { theme } = useTheme();
+
+  return (
+    <Box
+      bg="surface"
+      borderColor={invalid ? theme.colors.error : theme.colors.border}
+      borderWidth={1}
+      opacity={disabled ? 0.5 : 1}
+      radius="m"
+      testID={testID}
+    >
+      <Picker
+        enabled={!disabled}
+        onValueChange={(itemValue) => onValueChange(itemValue)}
+        selectedValue={value}
+        style={{
+          height: 44,
+          width: '100%',
+          backgroundColor: 'transparent',
+          color: theme.colors.text,
+          borderWidth: 0,
+        }}
+      >
+        {options.map((option) => (
+          <Picker.Item
+            key={option.value}
+            enabled={!option.disabled}
+            label={option.label}
+            value={option.value}
+          />
+        ))}
+      </Picker>
+    </Box>
+  );
+}

package/src/components/select/index.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './types';

package/src/components/select/types.ts

@@ -0,0 +1,14 @@
+export interface SelectOption<TValue extends string = string> {
+  value: TValue;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps<TValue extends string = string> {
+  value: TValue;
+  options: readonly SelectOption<TValue>[];
+  onValueChange: (value: TValue) => void;
+  disabled?: boolean;
+  invalid?: boolean;
+  testID?: string;
+}