@ankhorage/zora 14.0.1 → 16.0.0

package/src/components/rating/Rating.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { Icon } from '../../features/icon/public';
-import { Inline } from '../../foundation';
-import { resolveIconSize } from '../../internal/recipes';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { resolveRatingSegments } from './resolveRatingSegments';
-import { type RatingProps, resolveRatingRole } from './types';
-
-function RatingInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  testID,
-  value,
-  max = 5,
-  color = 'warning',
-  size = 'm',
-}: RatingProps) {
-  const { theme } = useZoraTheme();
-  const role = resolveRatingRole(theme, color);
-  const segments = resolveRatingSegments({ value, max });
-  const iconSize = resolveIconSize(size);
-
-  return (
-    <Inline align="center" gap="xxs" testID={testID} wrap="nowrap">
-      {segments.map((segment, index) => {
-        const name =
-          segment === 'full' ? 'star' : segment === 'half' ? 'star-half' : 'star-outline';
-        const color = segment === 'empty' ? theme.semantics.content.muted : role.base;
-
-        return <Icon key={index} color={color} name={name} size={iconSize} />;
-      })}
-    </Inline>
-  );
-}
-
-/***
- * Displays a star-based rating value with optional half steps.
- */
-export const Rating = withZoraThemeScope(RatingInner);

package/src/components/rating/index.ts

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

package/src/components/rating/resolveRatingSegments.test.ts

@@ -1,60 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-
-import { resolveRatingSegments } from './resolveRatingSegments';
-
-describe('resolveRatingSegments', () => {
-  test('returns empty segments for invalid input', () => {
-    expect(resolveRatingSegments({ value: 3, max: 0 })).toEqual([]);
-    expect(resolveRatingSegments({ value: Number.NaN, max: 5 })).toEqual([]);
-  });
-
-  test('clamps and rounds to nearest half-step', () => {
-    expect(resolveRatingSegments({ value: -1, max: 5 })).toEqual([
-      'empty',
-      'empty',
-      'empty',
-      'empty',
-      'empty',
-    ]);
-
-    expect(resolveRatingSegments({ value: 3, max: 5 })).toEqual([
-      'full',
-      'full',
-      'full',
-      'empty',
-      'empty',
-    ]);
-
-    expect(resolveRatingSegments({ value: 3.2, max: 5 })).toEqual([
-      'full',
-      'full',
-      'full',
-      'empty',
-      'empty',
-    ]);
-
-    expect(resolveRatingSegments({ value: 3.25, max: 5 })).toEqual([
-      'full',
-      'full',
-      'full',
-      'half',
-      'empty',
-    ]);
-
-    expect(resolveRatingSegments({ value: 5, max: 5 })).toEqual([
-      'full',
-      'full',
-      'full',
-      'full',
-      'full',
-    ]);
-
-    expect(resolveRatingSegments({ value: 6, max: 5 })).toEqual([
-      'full',
-      'full',
-      'full',
-      'full',
-      'full',
-    ]);
-  });
-});

package/src/components/rating/resolveRatingSegments.ts

@@ -1,34 +0,0 @@
-type RatingSegment = 'full' | 'half' | 'empty';
-
-export function resolveRatingSegments({
-  value,
-  max,
-}: {
-  value: number;
-  max: number;
-}): RatingSegment[] {
-  if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) {
-    return [];
-  }
-
-  const clamped = Math.max(0, Math.min(value, max));
-  const halfSteps = Math.round(clamped * 2);
-  const segments: RatingSegment[] = [];
-
-  for (let index = 0; index < max; index += 1) {
-    const threshold = (index + 1) * 2;
-    if (halfSteps >= threshold) {
-      segments.push('full');
-      continue;
-    }
-
-    if (halfSteps === threshold - 1) {
-      segments.push('half');
-      continue;
-    }
-
-    segments.push('empty');
-  }
-
-  return segments;
-}

package/src/components/rating/types.ts

@@ -1,37 +0,0 @@
-import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
-
-import type { ZoraColor, ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface RatingProps extends ZoraBaseProps {
-  value: number;
-  max?: number;
-  color?: ZoraColor;
-  size?: ZoraControlSize;
-}
-
-export function resolveRatingRole(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {
-  switch (color) {
-    case 'secondary':
-      return theme.semantics.secondary;
-    case 'tertiary':
-      return theme.semantics.accent;
-    case 'quaternary':
-      return theme.semantics.highlight;
-    case 'error':
-      return theme.semantics.error;
-    case 'info':
-      return theme.semantics.info;
-    case 'primary':
-      return theme.semantics.action.primary;
-    case 'danger':
-      return theme.semantics.action.danger;
-    case 'success':
-      return theme.semantics.success;
-    case 'warning':
-      return theme.semantics.warning;
-    case 'neutral':
-    default:
-      return theme.semantics.action.neutral;
-  }
-}

package/src/components/search-bar/index.ts

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

package/src/components/search-bar/meta.ts

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

package/src/components/search-bar/types.ts

@@ -1,14 +0,0 @@
-import type { ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface SearchBarProps extends ZoraBaseProps {
-  value: string;
-  onValueChange: (value: string) => void;
-  placeholder?: string;
-  onSubmit?: (value: string) => void;
-  onClear?: () => void;
-  clearable?: boolean;
-  size?: ZoraControlSize;
-  disabled?: boolean;
-  readOnly?: boolean;
-}

package/src/components/select/Select.tsx

@@ -1,67 +0,0 @@
-import { Picker } from '@react-native-picker/picker';
-import React from 'react';
-import { View } from 'react-native';
-
-import { Box } from '../../features/layout/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { SelectProps } from './types';
-
-function SelectInner<TValue extends string = string>({
-  themeId: _themeId,
-  mode: _mode,
-  value,
-  options,
-  onValueChange,
-  disabled,
-  invalid,
-  testID,
-  interactionPolicy,
-}: SelectProps<TValue>) {
-  const { theme } = useZoraTheme();
-  const passive = interactionPolicy === 'passive';
-
-  return (
-    <Box
-      bg="surface"
-      borderColor={invalid ? theme.colors.error : theme.colors.border}
-      borderWidth={1}
-      opacity={disabled ? 0.5 : 1}
-      radius="m"
-      testID={testID}
-    >
-      <View style={{ pointerEvents: passive ? 'none' : 'auto' }}>
-        <Picker
-          enabled={!disabled}
-          onValueChange={(itemValue) => {
-            if (!passive) {
-              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>
-      </View>
-    </Box>
-  );
-}
-
-/***
- * Select control for choosing a value from a list of options.
- */
-export const Select = withZoraThemeScope(SelectInner);

package/src/components/select/index.ts

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

package/src/components/select/meta.ts

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

package/src/components/tabs/Tabs.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-
-import { Button } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { TabItem, TabsProps } from './types';
-
-function TabsInner<TValue extends string = string>({
-  themeId: _themeId,
-  mode: _mode,
-  value,
-  items,
-  onValueChange,
-  variant = 'underline',
-  size = 'm',
-  disabled: tabsDisabled,
-  testID,
-  interactionPolicy,
-}: TabsProps<TValue>) {
-  const { theme } = useZoraTheme();
-  const passive = interactionPolicy === 'passive';
-
-  const renderTab = (item: TabItem<TValue>) => {
-    const isActive = item.value === value;
-    const isDisabled = tabsDisabled ?? item.disabled;
-
-    if (variant === 'segmented') {
-      return (
-        <Button
-          key={item.value}
-          variant={isActive ? 'solid' : 'ghost'}
-          color="neutral"
-          size={size}
-          disabled={isDisabled}
-          onPress={() => {
-            if (!passive) {
-              onValueChange(item.value);
-            }
-          }}
-          leadingIcon={item.icon}
-          testID={item.testID}
-        >
-          {item.label}
-          {item.badge}
-        </Button>
-      );
-    }
-
-    if (variant === 'pill') {
-      return (
-        <Button
-          key={item.value}
-          variant={isActive ? 'soft' : 'ghost'}
-          color={isActive ? 'primary' : 'neutral'}
-          size={size}
-          disabled={isDisabled}
-          onPress={() => {
-            if (!passive) {
-              onValueChange(item.value);
-            }
-          }}
-          leadingIcon={item.icon}
-          testID={item.testID}
-        >
-          {item.label}
-          {item.badge}
-        </Button>
-      );
-    }
-
-    // Default: 'underline'
-    return (
-      <Box
-        key={item.value}
-        borderColor={isActive ? theme.colors.primary : 'transparent'}
-        pb="xs"
-        style={{
-          borderBottomWidth: 2,
-        }}
-      >
-        <Button
-          variant="ghost"
-          color="neutral"
-          size={size}
-          disabled={isDisabled}
-          onPress={() => {
-            if (!passive) {
-              onValueChange(item.value);
-            }
-          }}
-          leadingIcon={item.icon}
-          testID={item.testID}
-        >
-          <Text
-            color={isActive ? 'primary' : undefined}
-            emphasis={isActive ? 'default' : 'muted'}
-            weight={isActive ? 'semiBold' : 'regular'}
-          >
-            {item.label}
-          </Text>
-          {item.badge}
-        </Button>
-      </Box>
-    );
-  };
-
-  return (
-    <Stack
-      direction="row"
-      gap={variant === 'segmented' ? 'none' : 'm'}
-      align="center"
-      testID={testID}
-      p={variant === 'segmented' ? 'xxs' : 'none'}
-      bg={variant === 'segmented' ? 'subtle' : 'transparent'}
-      radius={variant === 'segmented' ? 'm' : 'none'}
-    >
-      {items.map(renderTab)}
-    </Stack>
-  );
-}
-
-/***
- * Tab navigation for switching between views or content sections.
- *
- 
- */
-export const Tabs = withZoraThemeScope(TabsInner);

package/src/components/tabs/index.ts

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

package/src/components/tabs/meta.ts

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

package/src/components/tabs/types.ts

@@ -1,25 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-import type { ReactNode } from 'react';
-
-import type { ZoraControlSize } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface TabItem<TValue extends string = string> {
-  value: TValue;
-  label: ReactNode;
-  icon?: ButtonIconSpec;
-  badge?: ReactNode;
-  disabled?: boolean;
-  testID?: string;
-}
-
-export type TabsVariant = 'underline' | 'pill' | 'segmented';
-
-export interface TabsProps<TValue extends string = string> extends ZoraBaseProps {
-  value: TValue;
-  items: readonly TabItem<TValue>[];
-  onValueChange: (value: TValue) => void;
-  variant?: TabsVariant;
-  size?: ZoraControlSize;
-  disabled?: boolean;
-}

package/src/components/toolbar/Toolbar.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { Card } from '../../features/card/public';
-import { Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ToolbarProps } from './types';
-
-function ToolbarInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  children,
-  position = 'inline',
-  floating = false,
-  compact = true,
-  testID,
-}: ToolbarProps) {
-  const isFixed = position === 'top' || position === 'bottom';
-
-  return (
-    <Card
-      compact={compact}
-      tone={floating ? 'default' : 'subtle'}
-      testID={testID}
-      style={
-        isFixed
-          ? {
-              position: 'absolute',
-              [position]: 0,
-              zIndex: 10,
-              alignSelf: 'center',
-            }
-          : undefined
-      }
-    >
-      <Stack direction="row" gap="s" align="center">
-        {children}
-      </Stack>
-    </Card>
-  );
-}
-
-/***
- * Horizontal toolbar surface for grouping actions and controls.
- *
- 
- */
-export const Toolbar = withZoraThemeScope(ToolbarInner);

package/src/components/toolbar/ToolbarAction.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { IconButton } from '../../features/button/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ToolbarActionProps } from './types';
-
-function ToolbarActionInner({
-  themeId: _themeId,
-  mode: _mode,
-  active,
-  ...props
-}: ToolbarActionProps) {
-  return (
-    <IconButton
-      {...props}
-      variant={active ? 'soft' : 'ghost'}
-      color={active ? 'primary' : 'neutral'}
-      size="m"
-    />
-  );
-}
-
-/***
- * Convenience icon action for toolbars with active state styling.
- *
- 
- */
-export const ToolbarAction = withZoraThemeScope(ToolbarActionInner);

package/src/components/toolbar/index.ts

@@ -1,3 +0,0 @@
-export * from './Toolbar';
-export * from './ToolbarAction';
-export * from './types';

package/src/components/toolbar/meta.ts

@@ -1,19 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const toolbarMeta = {
-  name: 'Toolbar',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Action bar component; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;
-
-export const toolbarActionMeta = {
-  name: 'ToolbarAction',
-  category: 'component',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Action bar item; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/components/toolbar/types.ts

@@ -1,21 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type ToolbarPosition = 'top' | 'bottom' | 'inline';
-
-export interface ToolbarProps extends ZoraBaseProps {
-  children?: React.ReactNode;
-  position?: ToolbarPosition;
-  floating?: boolean;
-  compact?: boolean;
-}
-
-export interface ToolbarActionProps extends ZoraBaseProps {
-  label: string;
-  icon: ButtonIconSpec;
-  active?: boolean;
-  disabled?: boolean;
-  onPress?: () => void;
-}