@ankhorage/zora 1.5.0 → 2.0.0

package/dist/patterns/theme-composer/ThemeComposer.js

@@ -102,13 +102,13 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
           <Stack gap="xs">
             <Text variant="label">Name</Text>
             <Input value={nameInput} onChangeText={handleNameChange} placeholder="My theme" autoCorrect={false} invalid={nameError !== undefined} testID={testID ? `${testID}-name-input` : undefined}/>
-            {nameError ? (<Text tone="danger" variant="bodySmall">
+            {nameError ? (<Text color="danger" variant="bodySmall">
                 {nameError}
               </Text>) : null}
           </Stack>
           <Stack gap="xs">
             <Text variant="label">ID</Text>
-            <Text tone="muted" variant="bodySmall" testID={testID ? `${testID}-id-display` : undefined}>
+            <Text emphasis="muted" variant="bodySmall" testID={testID ? `${testID}-id-display` : undefined}>
               {value.id}
             </Text>
           </Stack>
@@ -134,7 +134,7 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
             borderColor: theme.colors.border,
         }}/>
           </Stack>
-          {hexError ? (<Text tone="danger" variant="bodySmall">
+          {hexError ? (<Text color="danger" variant="bodySmall">
               {hexError}
             </Text>) : null}
         </Stack>
@@ -163,41 +163,41 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
           </Stack>
           <Stack gap="xs">
             <Text variant="label">Primary color</Text>
-            <Text tone="muted" variant="bodySmall">
+            <Text emphasis="muted" variant="bodySmall">
               {value.primaryColor}
             </Text>
           </Stack>
           <Stack gap="xs">
             <Text variant="label">Harmony</Text>
-            <Text tone="muted" variant="bodySmall">
+            <Text emphasis="muted" variant="bodySmall">
               {value.harmony}
             </Text>
           </Stack>
           <Heading level={4}>Heading</Heading>
           <Text>Body text — this shows default text color and weight.</Text>
-          <Text tone="muted" variant="bodySmall">
+          <Text emphasis="muted" variant="bodySmall">
             Muted caption text.
           </Text>
           <Stack direction="row" gap="s" align="center">
-            <Button tone="primary" emphasis="solid" size="m">
+            <Button color="primary" variant="solid" size="m">
               Primary
             </Button>
-            <Button tone="neutral" emphasis="soft" size="m">
+            <Button color="neutral" variant="soft" size="m">
               Neutral
             </Button>
-            <Button tone="danger" emphasis="ghost" size="m">
+            <Button color="danger" variant="ghost" size="m">
               Danger
             </Button>
           </Stack>
           <Stack direction="row" gap="s" align="center">
-            <Badge tone="primary">Primary</Badge>
-            <Badge tone="success" emphasis="soft">
+            <Badge color="primary">Primary</Badge>
+            <Badge color="success" variant="soft">
               Success
             </Badge>
-            <Badge tone="warning" emphasis="soft">
+            <Badge color="warning" variant="soft">
               Warning
             </Badge>
-            <Badge tone="danger" emphasis="soft">
+            <Badge color="danger" variant="soft">
               Danger
             </Badge>
           </Stack>
@@ -206,7 +206,7 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
       </Card>
 
       {/* Submit */}
-      {onSubmit ? (<Button tone="primary" emphasis="solid" onPress={handleSubmit} testID={testID ? `${testID}-submit` : undefined}>
+      {onSubmit ? (<Button color="primary" variant="solid" onPress={handleSubmit} testID={testID ? `${testID}-submit` : undefined}>
           Apply theme
         </Button>) : null}
     </Stack>);

package/dist/patterns/theme-composer/ThemeComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeComposer.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';\nimport type { AppCategory } from '@ankhorage/contracts';\nimport { APP_CATEGORIES } from '@ankhorage/contracts';\nimport React from 'react';\n\nimport { Badge } from '../../components/badge';\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Input } from '../../components/input';\nimport { Select } from '../../components/select';\nimport { Tabs } from '../../components/tabs';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport type { ZoraThemeMode } from '../../theme/types';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ThemeComposerProps } from './types';\n\nconst HEX_ERROR_MESSAGE = 'Enter a valid 6-digit hex color.';\nconst HEX_INPUT_PLACEHOLDER = 'Enter hex color';\nconst NAME_ERROR_MESSAGE = 'Theme name cannot be empty.';\n\nfunction isValidHex(value: string): boolean {\n  try {\n    parseHexColorOrThrow(value);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nfunction formatAppCategoryLabel(category: AppCategory): string {\n  return category\n    .split('_')\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join(' ');\n}\n\nconst HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));\n\nconst MODE_TABS = [\n  { value: 'light' as ZoraThemeMode, label: 'Light' },\n  { value: 'dark' as ZoraThemeMode, label: 'Dark' },\n];\n\nfunction ThemeComposerInner({\n  themeId: _themeId,\n  value,\n  onChange,\n  mode,\n  onModeChange,\n  onSubmit,\n  appCategories,\n  testID,\n}: ThemeComposerProps) {\n  const { theme } = useZoraTheme();\n\n  const [hexInput, setHexInput] = React.useState<string>(value.primaryColor);\n  const [hexError, setHexError] = React.useState<string | undefined>(undefined);\n\n  const [nameInput, setNameInput] = React.useState<string>(value.name);\n  const [nameError, setNameError] = React.useState<string | undefined>(undefined);\n\n  // Keep local inputs in sync when value changes externally\n  React.useEffect(() => {\n    setHexInput(value.primaryColor);\n    setHexError(undefined);\n  }, [value.primaryColor]);\n\n  React.useEffect(() => {\n    setNameInput(value.name);\n    setNameError(undefined);\n  }, [value.name]);\n\n  function handleNameChange(text: string) {\n    setNameInput(text);\n    if (text.trim().length === 0) {\n      setNameError(NAME_ERROR_MESSAGE);\n    } else {\n      setNameError(undefined);\n      onChange({ ...value, name: text });\n    }\n  }\n\n  function handleHexChange(text: string) {\n    // Ensure leading hash\n    const normalized = text.startsWith('#') ? text : `#${text}`;\n    setHexInput(normalized);\n\n    if (isValidHex(normalized)) {\n      setHexError(undefined);\n      onChange({ ...value, primaryColor: normalized });\n    } else {\n      setHexError(HEX_ERROR_MESSAGE);\n    }\n  }\n\n  function handleSubmit() {\n    const hasValidName = nameInput.trim().length > 0;\n    const hasValidHex = isValidHex(hexInput);\n\n    if (!hasValidName) {\n      setNameError(NAME_ERROR_MESSAGE);\n    }\n\n    if (!hasValidHex) {\n      setHexError(HEX_ERROR_MESSAGE);\n    }\n\n    if (!hasValidName || !hasValidHex) {\n      return;\n    }\n\n    onSubmit?.({\n      ...value,\n      name: nameInput,\n      primaryColor: hexInput,\n    });\n  }\n\n  const activeMode = mode ?? 'light';\n  const categoryOptions = (appCategories ?? APP_CATEGORIES).map((c) => ({\n    value: c,\n    label: formatAppCategoryLabel(c),\n  }));\n\n  return (\n    <Stack gap=\"l\" testID={testID}>\n      {/* Section: Theme identity */}\n      <Card\n        title=\"Theme identity\"\n        description=\"Name your theme. The ID is assigned automatically and shown for reference.\"\n      >\n        <Stack gap=\"m\">\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Name</Text>\n            <Input\n              value={nameInput}\n              onChangeText={handleNameChange}\n              placeholder=\"My theme\"\n              autoCorrect={false}\n              invalid={nameError !== undefined}\n              testID={testID ? `${testID}-name-input` : undefined}\n            />\n            {nameError ? (\n              <Text tone=\"danger\" variant=\"bodySmall\">\n                {nameError}\n              </Text>\n            ) : null}\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">ID</Text>\n            <Text\n              tone=\"muted\"\n              variant=\"bodySmall\"\n              testID={testID ? `${testID}-id-display` : undefined}\n            >\n              {value.id}\n            </Text>\n          </Stack>\n        </Stack>\n      </Card>\n\n      {/* Section: App category */}\n      <Card title=\"App category\" description=\"Choose the category that best describes this app.\">\n        <Select\n          value={value.appCategory}\n          options={categoryOptions}\n          onValueChange={(c) => onChange({ ...value, appCategory: c })}\n          testID={testID ? `${testID}-category-select` : undefined}\n        />\n      </Card>\n\n      {/* Section: Primary Color */}\n      <Card title=\"Primary color\" description=\"Set the seed color for your theme palette.\">\n        <Stack gap=\"m\">\n          <Stack direction=\"row\" gap=\"m\" align=\"center\">\n            <Box flex={1}>\n              <Input\n                value={hexInput}\n                onChangeText={handleHexChange}\n                placeholder={HEX_INPUT_PLACEHOLDER}\n                autoCapitalize=\"none\"\n                autoCorrect={false}\n                maxLength={7}\n                invalid={hexError !== undefined}\n                testID={testID ? `${testID}-hex-input` : undefined}\n              />\n            </Box>\n            {/* Color preview chip */}\n            <Box\n              width={36}\n              height={36}\n              radius=\"m\"\n              style={{\n                backgroundColor: isValidHex(hexInput) ? hexInput : theme.colors.border,\n                borderWidth: 1,\n                borderColor: theme.colors.border,\n              }}\n            />\n          </Stack>\n          {hexError ? (\n            <Text tone=\"danger\" variant=\"bodySmall\">\n              {hexError}\n            </Text>\n          ) : null}\n        </Stack>\n      </Card>\n\n      {/* Section: Harmony */}\n      <Card\n        title=\"Harmony\"\n        description=\"Choose how accent hues are generated from your primary color.\"\n      >\n        <Select\n          value={value.harmony}\n          options={HARMONY_OPTIONS}\n          onValueChange={(h) => onChange({ ...value, harmony: h })}\n          testID={testID ? `${testID}-harmony-select` : undefined}\n        />\n      </Card>\n\n      {/* Section: Mode */}\n      <Card title=\"Mode\" description=\"Switch between light and dark presentation.\">\n        <Tabs\n          value={activeMode}\n          items={MODE_TABS}\n          onValueChange={(m) => onModeChange?.(m)}\n          variant=\"segmented\"\n          testID={testID ? `${testID}-mode-tabs` : undefined}\n        />\n      </Card>\n\n      {/* Section: Preview */}\n      <Card title=\"Preview\" description=\"A quick look at how your theme renders common controls.\">\n        <Stack gap=\"m\">\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Name</Text>\n            <Text>{value.name}</Text>\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Category</Text>\n            <Text>{formatAppCategoryLabel(value.appCategory)}</Text>\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Primary color</Text>\n            <Text tone=\"muted\" variant=\"bodySmall\">\n              {value.primaryColor}\n            </Text>\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Harmony</Text>\n            <Text tone=\"muted\" variant=\"bodySmall\">\n              {value.harmony}\n            </Text>\n          </Stack>\n          <Heading level={4}>Heading</Heading>\n          <Text>Body text — this shows default text color and weight.</Text>\n          <Text tone=\"muted\" variant=\"bodySmall\">\n            Muted caption text.\n          </Text>\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Button tone=\"primary\" emphasis=\"solid\" size=\"m\">\n              Primary\n            </Button>\n            <Button tone=\"neutral\" emphasis=\"soft\" size=\"m\">\n              Neutral\n            </Button>\n            <Button tone=\"danger\" emphasis=\"ghost\" size=\"m\">\n              Danger\n            </Button>\n          </Stack>\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Badge tone=\"primary\">Primary</Badge>\n            <Badge tone=\"success\" emphasis=\"soft\">\n              Success\n            </Badge>\n            <Badge tone=\"warning\" emphasis=\"soft\">\n              Warning\n            </Badge>\n            <Badge tone=\"danger\" emphasis=\"soft\">\n              Danger\n            </Badge>\n          </Stack>\n          <Card\n            tone=\"subtle\"\n            title=\"Nested card\"\n            description=\"Subtle tone inside the preview.\"\n            compact\n          />\n        </Stack>\n      </Card>\n\n      {/* Submit */}\n      {onSubmit ? (\n        <Button\n          tone=\"primary\"\n          emphasis=\"solid\"\n          onPress={handleSubmit}\n          testID={testID ? `${testID}-submit` : undefined}\n        >\n          Apply theme\n        </Button>\n      ) : null}\n    </Stack>\n  );\n}\n\nexport const ThemeComposer = withZoraThemeScope(ThemeComposerInner);\n"]}
+{"version":3,"file":"ThemeComposer.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';\nimport type { AppCategory } from '@ankhorage/contracts';\nimport { APP_CATEGORIES } from '@ankhorage/contracts';\nimport React from 'react';\n\nimport { Badge } from '../../components/badge';\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Input } from '../../components/input';\nimport { Select } from '../../components/select';\nimport { Tabs } from '../../components/tabs';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport type { ZoraThemeMode } from '../../theme/types';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ThemeComposerProps } from './types';\n\nconst HEX_ERROR_MESSAGE = 'Enter a valid 6-digit hex color.';\nconst HEX_INPUT_PLACEHOLDER = 'Enter hex color';\nconst NAME_ERROR_MESSAGE = 'Theme name cannot be empty.';\n\nfunction isValidHex(value: string): boolean {\n  try {\n    parseHexColorOrThrow(value);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nfunction formatAppCategoryLabel(category: AppCategory): string {\n  return category\n    .split('_')\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join(' ');\n}\n\nconst HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));\n\nconst MODE_TABS = [\n  { value: 'light' as ZoraThemeMode, label: 'Light' },\n  { value: 'dark' as ZoraThemeMode, label: 'Dark' },\n];\n\nfunction ThemeComposerInner({\n  themeId: _themeId,\n  value,\n  onChange,\n  mode,\n  onModeChange,\n  onSubmit,\n  appCategories,\n  testID,\n}: ThemeComposerProps) {\n  const { theme } = useZoraTheme();\n\n  const [hexInput, setHexInput] = React.useState<string>(value.primaryColor);\n  const [hexError, setHexError] = React.useState<string | undefined>(undefined);\n\n  const [nameInput, setNameInput] = React.useState<string>(value.name);\n  const [nameError, setNameError] = React.useState<string | undefined>(undefined);\n\n  // Keep local inputs in sync when value changes externally\n  React.useEffect(() => {\n    setHexInput(value.primaryColor);\n    setHexError(undefined);\n  }, [value.primaryColor]);\n\n  React.useEffect(() => {\n    setNameInput(value.name);\n    setNameError(undefined);\n  }, [value.name]);\n\n  function handleNameChange(text: string) {\n    setNameInput(text);\n    if (text.trim().length === 0) {\n      setNameError(NAME_ERROR_MESSAGE);\n    } else {\n      setNameError(undefined);\n      onChange({ ...value, name: text });\n    }\n  }\n\n  function handleHexChange(text: string) {\n    // Ensure leading hash\n    const normalized = text.startsWith('#') ? text : `#${text}`;\n    setHexInput(normalized);\n\n    if (isValidHex(normalized)) {\n      setHexError(undefined);\n      onChange({ ...value, primaryColor: normalized });\n    } else {\n      setHexError(HEX_ERROR_MESSAGE);\n    }\n  }\n\n  function handleSubmit() {\n    const hasValidName = nameInput.trim().length > 0;\n    const hasValidHex = isValidHex(hexInput);\n\n    if (!hasValidName) {\n      setNameError(NAME_ERROR_MESSAGE);\n    }\n\n    if (!hasValidHex) {\n      setHexError(HEX_ERROR_MESSAGE);\n    }\n\n    if (!hasValidName || !hasValidHex) {\n      return;\n    }\n\n    onSubmit?.({\n      ...value,\n      name: nameInput,\n      primaryColor: hexInput,\n    });\n  }\n\n  const activeMode = mode ?? 'light';\n  const categoryOptions = (appCategories ?? APP_CATEGORIES).map((c) => ({\n    value: c,\n    label: formatAppCategoryLabel(c),\n  }));\n\n  return (\n    <Stack gap=\"l\" testID={testID}>\n      {/* Section: Theme identity */}\n      <Card\n        title=\"Theme identity\"\n        description=\"Name your theme. The ID is assigned automatically and shown for reference.\"\n      >\n        <Stack gap=\"m\">\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Name</Text>\n            <Input\n              value={nameInput}\n              onChangeText={handleNameChange}\n              placeholder=\"My theme\"\n              autoCorrect={false}\n              invalid={nameError !== undefined}\n              testID={testID ? `${testID}-name-input` : undefined}\n            />\n            {nameError ? (\n              <Text color=\"danger\" variant=\"bodySmall\">\n                {nameError}\n              </Text>\n            ) : null}\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">ID</Text>\n            <Text\n              emphasis=\"muted\"\n              variant=\"bodySmall\"\n              testID={testID ? `${testID}-id-display` : undefined}\n            >\n              {value.id}\n            </Text>\n          </Stack>\n        </Stack>\n      </Card>\n\n      {/* Section: App category */}\n      <Card title=\"App category\" description=\"Choose the category that best describes this app.\">\n        <Select\n          value={value.appCategory}\n          options={categoryOptions}\n          onValueChange={(c) => onChange({ ...value, appCategory: c })}\n          testID={testID ? `${testID}-category-select` : undefined}\n        />\n      </Card>\n\n      {/* Section: Primary Color */}\n      <Card title=\"Primary color\" description=\"Set the seed color for your theme palette.\">\n        <Stack gap=\"m\">\n          <Stack direction=\"row\" gap=\"m\" align=\"center\">\n            <Box flex={1}>\n              <Input\n                value={hexInput}\n                onChangeText={handleHexChange}\n                placeholder={HEX_INPUT_PLACEHOLDER}\n                autoCapitalize=\"none\"\n                autoCorrect={false}\n                maxLength={7}\n                invalid={hexError !== undefined}\n                testID={testID ? `${testID}-hex-input` : undefined}\n              />\n            </Box>\n            {/* Color preview chip */}\n            <Box\n              width={36}\n              height={36}\n              radius=\"m\"\n              style={{\n                backgroundColor: isValidHex(hexInput) ? hexInput : theme.colors.border,\n                borderWidth: 1,\n                borderColor: theme.colors.border,\n              }}\n            />\n          </Stack>\n          {hexError ? (\n            <Text color=\"danger\" variant=\"bodySmall\">\n              {hexError}\n            </Text>\n          ) : null}\n        </Stack>\n      </Card>\n\n      {/* Section: Harmony */}\n      <Card\n        title=\"Harmony\"\n        description=\"Choose how accent hues are generated from your primary color.\"\n      >\n        <Select\n          value={value.harmony}\n          options={HARMONY_OPTIONS}\n          onValueChange={(h) => onChange({ ...value, harmony: h })}\n          testID={testID ? `${testID}-harmony-select` : undefined}\n        />\n      </Card>\n\n      {/* Section: Mode */}\n      <Card title=\"Mode\" description=\"Switch between light and dark presentation.\">\n        <Tabs\n          value={activeMode}\n          items={MODE_TABS}\n          onValueChange={(m) => onModeChange?.(m)}\n          variant=\"segmented\"\n          testID={testID ? `${testID}-mode-tabs` : undefined}\n        />\n      </Card>\n\n      {/* Section: Preview */}\n      <Card title=\"Preview\" description=\"A quick look at how your theme renders common controls.\">\n        <Stack gap=\"m\">\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Name</Text>\n            <Text>{value.name}</Text>\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Category</Text>\n            <Text>{formatAppCategoryLabel(value.appCategory)}</Text>\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Primary color</Text>\n            <Text emphasis=\"muted\" variant=\"bodySmall\">\n              {value.primaryColor}\n            </Text>\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Harmony</Text>\n            <Text emphasis=\"muted\" variant=\"bodySmall\">\n              {value.harmony}\n            </Text>\n          </Stack>\n          <Heading level={4}>Heading</Heading>\n          <Text>Body text — this shows default text color and weight.</Text>\n          <Text emphasis=\"muted\" variant=\"bodySmall\">\n            Muted caption text.\n          </Text>\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Button color=\"primary\" variant=\"solid\" size=\"m\">\n              Primary\n            </Button>\n            <Button color=\"neutral\" variant=\"soft\" size=\"m\">\n              Neutral\n            </Button>\n            <Button color=\"danger\" variant=\"ghost\" size=\"m\">\n              Danger\n            </Button>\n          </Stack>\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Badge color=\"primary\">Primary</Badge>\n            <Badge color=\"success\" variant=\"soft\">\n              Success\n            </Badge>\n            <Badge color=\"warning\" variant=\"soft\">\n              Warning\n            </Badge>\n            <Badge color=\"danger\" variant=\"soft\">\n              Danger\n            </Badge>\n          </Stack>\n          <Card\n            tone=\"subtle\"\n            title=\"Nested card\"\n            description=\"Subtle tone inside the preview.\"\n            compact\n          />\n        </Stack>\n      </Card>\n\n      {/* Submit */}\n      {onSubmit ? (\n        <Button\n          color=\"primary\"\n          variant=\"solid\"\n          onPress={handleSubmit}\n          testID={testID ? `${testID}-submit` : undefined}\n        >\n          Apply theme\n        </Button>\n      ) : null}\n    </Stack>\n  );\n}\n\nexport const ThemeComposer = withZoraThemeScope(ThemeComposerInner);\n"]}

package/dist/patterns/tile-grid/PaletteItem.js

@@ -18,7 +18,7 @@ function PaletteItemInner({ themeId: _themeId, mode: _mode, title, description,
         <Heading level={5} align="center">
           {title}
         </Heading>
-        {description ? (<Text align="center" tone="muted" variant="caption">
+        {description ? (<Text align="center" emphasis="muted" variant="caption">
             {description}
           </Text>) : null}
         {badge ? <Box pt="xs">{badge}</Box> : null}

package/dist/patterns/tile-grid/PaletteItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaletteItem.js","sourceRoot":"","sources":["../../../src/patterns/tile-grid/PaletteItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,GACW;IACjB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CACP,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CACtC,KAAK,CAAC,CACJ,QAAQ;YACN,CAAC,CAAC;gBACE,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;gBACjC,WAAW,EAAE,CAAC;aACf;YACH,CAAC,CAAC,SACN,CAAC,CAED;MAAA,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAC1C;QAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACvD;QAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAC/B;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,OAAO,CACT;QAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CACjD;YAAA,CAAC,WAAW,CACd;UAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5C;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { Box } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { PaletteItemProps } from './types';\n\nfunction PaletteItemInner({\n  themeId: _themeId,\n  mode: _mode,\n  title,\n  description,\n  icon,\n  badge,\n  selected,\n  disabled,\n  onPress,\n  testID,\n}: PaletteItemProps) {\n  const { theme } = useZoraTheme();\n\n  return (\n    <Card\n      compact\n      disabled={disabled}\n      onPress={onPress}\n      testID={testID}\n      tone={selected ? 'default' : 'subtle'}\n      style={\n        selected\n          ? {\n              borderColor: theme.colors.primary,\n              borderWidth: 2,\n            }\n          : undefined\n      }\n    >\n      <Box p=\"xs\" style={{ alignItems: 'center' }}>\n        {icon ? <Box pb=\"s\">{/* Icon spec here */}</Box> : null}\n        <Heading level={5} align=\"center\">\n          {title}\n        </Heading>\n        {description ? (\n          <Text align=\"center\" tone=\"muted\" variant=\"caption\">\n            {description}\n          </Text>\n        ) : null}\n        {badge ? <Box pt=\"xs\">{badge}</Box> : null}\n      </Box>\n    </Card>\n  );\n}\n\nexport const PaletteItem = withZoraThemeScope(PaletteItemInner);\n"]}
+{"version":3,"file":"PaletteItem.js","sourceRoot":"","sources":["../../../src/patterns/tile-grid/PaletteItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,GACW;IACjB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CACP,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CACtC,KAAK,CAAC,CACJ,QAAQ;YACN,CAAC,CAAC;gBACE,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;gBACjC,WAAW,EAAE,CAAC;aACf;YACH,CAAC,CAAC,SACN,CAAC,CAED;MAAA,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAC1C;QAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACvD;QAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAC/B;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,OAAO,CACT;QAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CACrD;YAAA,CAAC,WAAW,CACd;UAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5C;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { Box } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { PaletteItemProps } from './types';\n\nfunction PaletteItemInner({\n  themeId: _themeId,\n  mode: _mode,\n  title,\n  description,\n  icon,\n  badge,\n  selected,\n  disabled,\n  onPress,\n  testID,\n}: PaletteItemProps) {\n  const { theme } = useZoraTheme();\n\n  return (\n    <Card\n      compact\n      disabled={disabled}\n      onPress={onPress}\n      testID={testID}\n      tone={selected ? 'default' : 'subtle'}\n      style={\n        selected\n          ? {\n              borderColor: theme.colors.primary,\n              borderWidth: 2,\n            }\n          : undefined\n      }\n    >\n      <Box p=\"xs\" style={{ alignItems: 'center' }}>\n        {icon ? <Box pb=\"s\">{/* Icon spec here */}</Box> : null}\n        <Heading level={5} align=\"center\">\n          {title}\n        </Heading>\n        {description ? (\n          <Text align=\"center\" emphasis=\"muted\" variant=\"caption\">\n            {description}\n          </Text>\n        ) : null}\n        {badge ? <Box pt=\"xs\">{badge}</Box> : null}\n      </Box>\n    </Card>\n  );\n}\n\nexport const PaletteItem = withZoraThemeScope(PaletteItemInner);\n"]}

package/dist/patterns/timeline/Timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/patterns/timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,SAAS,CAAC;AA6F3D,eAAO,MAAM,QAAQ,qDAAoC,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/patterns/timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,SAAS,CAAC;AAuG3D,eAAO,MAAM,QAAQ,qDAAoC,CAAC"}

package/dist/patterns/timeline/Timeline.js

@@ -6,8 +6,18 @@ import { Box, Inline, Stack } from '../../foundation';
 import { resolveIconSize } from '../../internal/recipes';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-function resolveRoleSemantics(theme, tone) {
-    switch (tone) {
+function resolveRoleSemantics(theme, color) {
+    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':
@@ -42,11 +52,11 @@ function TimelineInner({ themeId: _themeId, mode: _mode, testID, items, compact
         <Stack flex={1} gap="xs" testID={testID}>
           <Inline align="flex-start" gap="s" justify="space-between" wrap="wrap">
             <Heading level={compact ? 4 : 3}>{item.title}</Heading>
-            {item.meta ? (<Text tone="muted" variant="caption">
+            {item.meta ? (<Text emphasis="muted" variant="caption">
                 {item.meta}
               </Text>) : null}
           </Inline>
-          {item.description ? (<Text tone="muted" variant="bodySmall">
+          {item.description ? (<Text emphasis="muted" variant="bodySmall">
               {item.description}
             </Text>) : null}
         </Stack>

package/dist/patterns/timeline/Timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/patterns/timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Heading } from '../../components/heading';\nimport { Icon } from '../../components/icon';\nimport { Text } from '../../components/text';\nimport { Box, Inline, Stack } from '../../foundation';\nimport type { ZoraTone } from '../../internal/recipes';\nimport { resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { TimelineItem, TimelineProps } from './types';\n\nfunction resolveRoleSemantics(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {\n  switch (tone) {\n    case 'primary':\n      return theme.semantics.action.primary;\n    case 'danger':\n      return theme.semantics.action.danger;\n    case 'success':\n      return theme.semantics.success;\n    case 'warning':\n      return theme.semantics.warning;\n    case 'neutral':\n    default:\n      return theme.semantics.action.neutral;\n  }\n}\n\nfunction TimelineInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  items,\n  compact = false,\n}: TimelineProps) {\n  const { theme } = useZoraTheme();\n  const gap = compact ? 'm' : 'l';\n  const connectorHeight = compact ? 20 : 36;\n\n  const renderItem = (item: TimelineItem, index: number) => {\n    const status = item.status ?? 'neutral';\n    const role = resolveRoleSemantics(theme, status);\n    const showConnector = index < items.length - 1;\n    const iconSize = Math.max(12, resolveIconSize('s'));\n\n    return (\n      <Inline key={item.id} align=\"flex-start\" gap=\"m\" testID={item.testID} wrap=\"nowrap\">\n        <Stack align=\"center\" flexShrink={0} gap=\"xs\" style={{ width: 24 }}>\n          <Box\n            bg={status === 'neutral' ? theme.semantics.neutral.surface : role.softBg}\n            borderColor={status === 'neutral' ? theme.semantics.neutral.divider : role.base}\n            borderWidth={1}\n            height={20}\n            radius=\"full\"\n            width={20}\n            style={{ alignItems: 'center', justifyContent: 'center' }}\n          >\n            {item.icon ? (\n              <Icon\n                color={status === 'neutral' ? theme.semantics.content.muted : role.base}\n                name={item.icon.name}\n                provider={item.icon.provider}\n                size={iconSize}\n              />\n            ) : null}\n          </Box>\n\n          {showConnector ? (\n            <Box\n              bg={theme.semantics.neutral.divider}\n              height={connectorHeight}\n              radius=\"full\"\n              style={{ width: 2 }}\n            />\n          ) : null}\n        </Stack>\n\n        <Stack flex={1} gap=\"xs\" testID={testID}>\n          <Inline align=\"flex-start\" gap=\"s\" justify=\"space-between\" wrap=\"wrap\">\n            <Heading level={compact ? 4 : 3}>{item.title}</Heading>\n            {item.meta ? (\n              <Text tone=\"muted\" variant=\"caption\">\n                {item.meta}\n              </Text>\n            ) : null}\n          </Inline>\n          {item.description ? (\n            <Text tone=\"muted\" variant=\"bodySmall\">\n              {item.description}\n            </Text>\n          ) : null}\n        </Stack>\n      </Inline>\n    );\n  };\n\n  return (\n    <Stack gap={gap} testID={testID}>\n      {items.map(renderItem)}\n    </Stack>\n  );\n}\n\nexport const Timeline = withZoraThemeScope(TimelineInner);\n"]}
+{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/patterns/timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Heading } from '../../components/heading';\nimport { Icon } from '../../components/icon';\nimport { Text } from '../../components/text';\nimport { Box, Inline, Stack } from '../../foundation';\nimport type { ZoraColor } from '../../internal/recipes';\nimport { resolveIconSize } from '../../internal/recipes';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { TimelineItem, TimelineProps } from './types';\n\nfunction resolveRoleSemantics(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {\n  switch (color) {\n    case 'secondary':\n      return theme.semantics.secondary;\n    case 'tertiary':\n      return theme.semantics.accent;\n    case 'quaternary':\n      return theme.semantics.highlight;\n    case 'error':\n      return theme.semantics.error;\n    case 'info':\n      return theme.semantics.info;\n    case 'primary':\n      return theme.semantics.action.primary;\n    case 'danger':\n      return theme.semantics.action.danger;\n    case 'success':\n      return theme.semantics.success;\n    case 'warning':\n      return theme.semantics.warning;\n    case 'neutral':\n    default:\n      return theme.semantics.action.neutral;\n  }\n}\n\nfunction TimelineInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  items,\n  compact = false,\n}: TimelineProps) {\n  const { theme } = useZoraTheme();\n  const gap = compact ? 'm' : 'l';\n  const connectorHeight = compact ? 20 : 36;\n\n  const renderItem = (item: TimelineItem, index: number) => {\n    const status = item.status ?? 'neutral';\n    const role = resolveRoleSemantics(theme, status);\n    const showConnector = index < items.length - 1;\n    const iconSize = Math.max(12, resolveIconSize('s'));\n\n    return (\n      <Inline key={item.id} align=\"flex-start\" gap=\"m\" testID={item.testID} wrap=\"nowrap\">\n        <Stack align=\"center\" flexShrink={0} gap=\"xs\" style={{ width: 24 }}>\n          <Box\n            bg={status === 'neutral' ? theme.semantics.neutral.surface : role.softBg}\n            borderColor={status === 'neutral' ? theme.semantics.neutral.divider : role.base}\n            borderWidth={1}\n            height={20}\n            radius=\"full\"\n            width={20}\n            style={{ alignItems: 'center', justifyContent: 'center' }}\n          >\n            {item.icon ? (\n              <Icon\n                color={status === 'neutral' ? theme.semantics.content.muted : role.base}\n                name={item.icon.name}\n                provider={item.icon.provider}\n                size={iconSize}\n              />\n            ) : null}\n          </Box>\n\n          {showConnector ? (\n            <Box\n              bg={theme.semantics.neutral.divider}\n              height={connectorHeight}\n              radius=\"full\"\n              style={{ width: 2 }}\n            />\n          ) : null}\n        </Stack>\n\n        <Stack flex={1} gap=\"xs\" testID={testID}>\n          <Inline align=\"flex-start\" gap=\"s\" justify=\"space-between\" wrap=\"wrap\">\n            <Heading level={compact ? 4 : 3}>{item.title}</Heading>\n            {item.meta ? (\n              <Text emphasis=\"muted\" variant=\"caption\">\n                {item.meta}\n              </Text>\n            ) : null}\n          </Inline>\n          {item.description ? (\n            <Text emphasis=\"muted\" variant=\"bodySmall\">\n              {item.description}\n            </Text>\n          ) : null}\n        </Stack>\n      </Inline>\n    );\n  };\n\n  return (\n    <Stack gap={gap} testID={testID}>\n      {items.map(renderItem)}\n    </Stack>\n  );\n}\n\nexport const Timeline = withZoraThemeScope(TimelineInner);\n"]}

package/dist/patterns/timeline/types.d.ts

@@ -1,13 +1,13 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type React from 'react';
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 export interface TimelineItem {
     id: string;
     title: React.ReactNode;
     description?: React.ReactNode;
     meta?: React.ReactNode;
-    status?: ZoraTone;
+    status?: ZoraColor;
     icon?: ButtonIconSpec;
     testID?: string;
 }

package/dist/patterns/timeline/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/timeline/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/timeline/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/patterns/timeline/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/timeline/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface TimelineItem {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  meta?: React.ReactNode;\n  status?: ZoraTone;\n  icon?: ButtonIconSpec;\n  testID?: string;\n}\n\nexport interface TimelineProps extends ZoraBaseProps {\n  items: readonly TimelineItem[];\n  compact?: boolean;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/timeline/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraColor } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface TimelineItem {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  meta?: React.ReactNode;\n  status?: ZoraColor;\n  icon?: ButtonIconSpec;\n  testID?: string;\n}\n\nexport interface TimelineProps extends ZoraBaseProps {\n  items: readonly TimelineItem[];\n  compact?: boolean;\n}\n"]}

package/dist/patterns/tree-view/TreeItem.js

@@ -19,7 +19,7 @@ function TreeItemInner({ themeId: _themeId, mode: _mode, node, depth, selectedId
         }
         return (<SettingsRow title={node.label} control={<Stack direction="row" gap="xs" align="center">
             {node.actions}
-            {hasChildren ? (<IconButton icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }} label={isExpanded ? 'Collapse' : 'Expand'} onPress={() => onToggleExpand(node.id)} size="s" emphasis="ghost"/>) : null}
+            {hasChildren ? (<IconButton icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }} label={isExpanded ? 'Collapse' : 'Expand'} onPress={() => onToggleExpand(node.id)} size="s" variant="ghost"/>) : null}
           </Stack>} meta={node.meta} disabled={node.disabled}/>);
     };
     return (<Box testID={testID}>

package/dist/patterns/tree-view/TreeItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.js","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { IconButton } from '../../components/icon-button';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\nimport { SettingsRow } from '../settings-row';\nimport type { TreeItemNode, TreeItemRenderProps } from './types';\n\ninterface TreeItemProps<TId extends string = string> extends ZoraBaseProps {\n  node: TreeItemNode<TId>;\n  depth: number;\n  selectedId?: TId;\n  expandedIds: readonly TId[];\n  onSelect?: (id: TId) => void;\n  onToggleExpand: (id: TId) => void;\n  renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;\n}\n\nfunction TreeItemInner<TId extends string = string>({\n  themeId: _themeId,\n  mode: _mode,\n  node,\n  depth,\n  selectedId,\n  expandedIds,\n  onSelect,\n  onToggleExpand,\n  renderItem,\n  testID,\n}: TreeItemProps<TId>) {\n  const hasChildren = node.children !== undefined && node.children.length > 0;\n  const isExpanded = expandedIds.includes(node.id);\n  const isSelected = selectedId === node.id;\n\n  const renderContent = () => {\n    if (renderItem) {\n      return renderItem({\n        node,\n        depth,\n        selected: isSelected,\n        expanded: isExpanded,\n        hasChildren,\n      });\n    }\n\n    return (\n      <SettingsRow\n        title={node.label}\n        control={\n          <Stack direction=\"row\" gap=\"xs\" align=\"center\">\n            {node.actions}\n            {hasChildren ? (\n              <IconButton\n                icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }}\n                label={isExpanded ? 'Collapse' : 'Expand'}\n                onPress={() => onToggleExpand(node.id)}\n                size=\"s\"\n                emphasis=\"ghost\"\n              />\n            ) : null}\n          </Stack>\n        }\n        meta={node.meta}\n        disabled={node.disabled}\n      />\n    );\n  };\n\n  return (\n    <Box testID={testID}>\n      <Box style={{ paddingLeft: depth * 16 }}>{renderContent()}</Box>\n      {hasChildren && isExpanded ? (\n        <Box>\n          {node.children?.map((child) => (\n            <TreeItem\n              key={child.id}\n              depth={depth + 1}\n              expandedIds={expandedIds}\n              node={child}\n              onSelect={onSelect}\n              onToggleExpand={onToggleExpand}\n              renderItem={renderItem}\n              selectedId={selectedId}\n            />\n          ))}\n        </Box>\n      ) : null}\n    </Box>\n  );\n}\n\nexport const TreeItem = withZoraThemeScope(TreeItemInner);\n"]}
+{"version":3,"file":"TreeItem.js","sourceRoot":"","sources":["../../../src/patterns/tree-view/TreeItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { IconButton } from '../../components/icon-button';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\nimport { SettingsRow } from '../settings-row';\nimport type { TreeItemNode, TreeItemRenderProps } from './types';\n\ninterface TreeItemProps<TId extends string = string> extends ZoraBaseProps {\n  node: TreeItemNode<TId>;\n  depth: number;\n  selectedId?: TId;\n  expandedIds: readonly TId[];\n  onSelect?: (id: TId) => void;\n  onToggleExpand: (id: TId) => void;\n  renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;\n}\n\nfunction TreeItemInner<TId extends string = string>({\n  themeId: _themeId,\n  mode: _mode,\n  node,\n  depth,\n  selectedId,\n  expandedIds,\n  onSelect,\n  onToggleExpand,\n  renderItem,\n  testID,\n}: TreeItemProps<TId>) {\n  const hasChildren = node.children !== undefined && node.children.length > 0;\n  const isExpanded = expandedIds.includes(node.id);\n  const isSelected = selectedId === node.id;\n\n  const renderContent = () => {\n    if (renderItem) {\n      return renderItem({\n        node,\n        depth,\n        selected: isSelected,\n        expanded: isExpanded,\n        hasChildren,\n      });\n    }\n\n    return (\n      <SettingsRow\n        title={node.label}\n        control={\n          <Stack direction=\"row\" gap=\"xs\" align=\"center\">\n            {node.actions}\n            {hasChildren ? (\n              <IconButton\n                icon={{ name: isExpanded ? 'chevron-down-outline' : 'chevron-forward-outline' }}\n                label={isExpanded ? 'Collapse' : 'Expand'}\n                onPress={() => onToggleExpand(node.id)}\n                size=\"s\"\n                variant=\"ghost\"\n              />\n            ) : null}\n          </Stack>\n        }\n        meta={node.meta}\n        disabled={node.disabled}\n      />\n    );\n  };\n\n  return (\n    <Box testID={testID}>\n      <Box style={{ paddingLeft: depth * 16 }}>{renderContent()}</Box>\n      {hasChildren && isExpanded ? (\n        <Box>\n          {node.children?.map((child) => (\n            <TreeItem\n              key={child.id}\n              depth={depth + 1}\n              expandedIds={expandedIds}\n              node={child}\n              onSelect={onSelect}\n              onToggleExpand={onToggleExpand}\n              renderItem={renderItem}\n              selectedId={selectedId}\n            />\n          ))}\n        </Box>\n      ) : null}\n    </Box>\n  );\n}\n\nexport const TreeItem = withZoraThemeScope(TreeItemInner);\n"]}

package/dist/patterns/zora-tab-bar/ZoraTabBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraTabBar.d.ts","sourceRoot":"","sources":["../../../src/patterns/zora-tab-bar/ZoraTabBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA6C/C,eAAO,MAAM,UAAU,uDAAsC,CAAC"}
+{"version":3,"file":"ZoraTabBar.d.ts","sourceRoot":"","sources":["../../../src/patterns/zora-tab-bar/ZoraTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoI/C,eAAO,MAAM,UAAU,uDAAsC,CAAC"}

package/dist/patterns/zora-tab-bar/ZoraTabBar.js

@@ -1,27 +1,76 @@
-import { TabBar as SurfaceTabBar } from '@ankhorage/surface';
 import React from 'react';
-import { Surface } from '../../foundation';
+import { Pressable, Text as ReactNativeText } from 'react-native';
+import { Icon } from '../../components/icon';
+import { Box, Surface } from '../../foundation';
 import { createTabBarItemPressHandler, resolveNavigationItems, } from '../../internal/resolveZoraNavigationItems';
+import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-function ZoraTabBarInner({ themeId: _themeId, mode: _mode, state, navigation, descriptors, routeMap, compact = false, chrome = 'raised', testID, }) {
+function resolveAccessibilityLabel(label, explicitLabel) {
+    if (explicitLabel !== undefined) {
+        return explicitLabel;
+    }
+    if (typeof label === 'string') {
+        return label;
+    }
+    if (typeof label === 'number') {
+        return String(label);
+    }
+    return undefined;
+}
+function ZoraTabBarInner({ themeId: _themeId, mode: _mode, state, navigation, descriptors, insets, routeMap, compact = false, chrome = 'raised', testID, }) {
+    const { theme } = useZoraTheme();
     const resolved = resolveNavigationItems({
         state,
         descriptors,
         routeMap,
         kind: 'tab',
     });
-    const items = resolved.map((item) => ({
-        id: item.route.key,
-        label: item.label,
-        icon: item.metadata?.icon,
-        badge: item.metadata?.badge,
-        active: item.active,
-        disabled: item.disabled,
-        onPress: createTabBarItemPressHandler({ item, navigation }),
-        accessibilityLabel: item.metadata?.accessibilityLabel,
-        testID: item.metadata?.testID,
-    }));
-    const content = <SurfaceTabBar compact={compact} items={items} testID={testID}/>;
+    const bottomInset = insets?.bottom ?? 0;
+    const minHeight = compact ? 56 : 64;
+    const labelSize = compact ? theme.typography.sizes.xs : theme.typography.sizes.s;
+    const labelWeight = theme.typography.weights.medium;
+    const content = (<Box bg="surface" style={{
+            borderTopColor: theme.semantics.border.default,
+            borderTopWidth: 1,
+            flexDirection: 'row',
+            minHeight: minHeight + bottomInset,
+            paddingBottom: bottomInset,
+        }} testID={testID}>
+      {resolved.map((item) => {
+            const { active } = item;
+            const { disabled } = item;
+            const contentColor = disabled
+                ? theme.semantics.content.subtle
+                : active
+                    ? theme.semantics.action.primary.base
+                    : theme.semantics.content.muted;
+            const backgroundColor = active
+                ? theme.semantics.action.primary.softBg
+                : theme.semantics.surface.default;
+            return (<Pressable accessibilityLabel={resolveAccessibilityLabel(item.label, item.metadata?.accessibilityLabel)} accessibilityRole="tab" accessibilityState={{ selected: active, disabled }} disabled={disabled} key={item.route.key} onPress={createTabBarItemPressHandler({ item, navigation })} style={{
+                    alignItems: 'center',
+                    backgroundColor,
+                    flex: 1,
+                    justifyContent: 'center',
+                    minHeight,
+                    opacity: disabled ? 0.48 : 1,
+                    paddingHorizontal: theme.spacing.s,
+                    paddingVertical: compact ? theme.spacing.xs : theme.spacing.s,
+                }} testID={item.metadata?.testID ?? (testID ? `${testID}-item-${item.route.key}` : undefined)}>
+            {item.metadata?.icon ? (<Icon color={contentColor} name={item.metadata.icon.name} provider={item.metadata.icon.provider} size={compact ? theme.spacing.m : theme.spacing.l}/>) : null}
+            <ReactNativeText numberOfLines={1} style={{
+                    color: contentColor,
+                    fontSize: labelSize,
+                    fontWeight: labelWeight,
+                    lineHeight: compact ? 16 : 20,
+                    marginTop: item.metadata?.icon ? theme.spacing.xs : 0,
+                    textAlign: 'center',
+                }}>
+              {item.label}
+            </ReactNativeText>
+          </Pressable>);
+        })}
+    </Box>);
     if (chrome === 'none') {
         return content;
     }

package/dist/patterns/zora-tab-bar/ZoraTabBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoraTabBar.js","sourceRoot":"","sources":["../../../src/patterns/zora-tab-bar/ZoraTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,GACvB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,QAAQ,EACjB,MAAM,GACU;IAChB,MAAM,QAAQ,GAAG,sBAAsB,CAAC;QACtC,KAAK;QACL,WAAW;QACX,QAAQ;QACR,IAAI,EAAE,KAAK;KACZ,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACpC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG;QAClB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI;QACzB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK;QAC3B,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,4BAA4B,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;QAC3D,kBAAkB,EAAE,IAAI,CAAC,QAAQ,EAAE,kBAAkB;QACrD,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM;KAC9B,CAAC,CAAC,CAAC;IAEJ,MAAM,OAAO,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAG,CAAC;IAElF,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,CACL,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACxE;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import { TabBar as SurfaceTabBar } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Surface } from '../../foundation';\nimport {\n  createTabBarItemPressHandler,\n  resolveNavigationItems,\n} from '../../internal/resolveZoraNavigationItems';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ZoraTabBarProps } from './types';\n\nfunction ZoraTabBarInner({\n  themeId: _themeId,\n  mode: _mode,\n  state,\n  navigation,\n  descriptors,\n  routeMap,\n  compact = false,\n  chrome = 'raised',\n  testID,\n}: ZoraTabBarProps) {\n  const resolved = resolveNavigationItems({\n    state,\n    descriptors,\n    routeMap,\n    kind: 'tab',\n  });\n\n  const items = resolved.map((item) => ({\n    id: item.route.key,\n    label: item.label,\n    icon: item.metadata?.icon,\n    badge: item.metadata?.badge,\n    active: item.active,\n    disabled: item.disabled,\n    onPress: createTabBarItemPressHandler({ item, navigation }),\n    accessibilityLabel: item.metadata?.accessibilityLabel,\n    testID: item.metadata?.testID,\n  }));\n\n  const content = <SurfaceTabBar compact={compact} items={items} testID={testID} />;\n\n  if (chrome === 'none') {\n    return content;\n  }\n\n  return (\n    <Surface variant=\"raised\" testID={testID ? `${testID}-chrome` : undefined}>\n      {content}\n    </Surface>\n  );\n}\n\nexport const ZoraTabBar = withZoraThemeScope(ZoraTabBarInner);\n"]}
+{"version":3,"file":"ZoraTabBar.js","sourceRoot":"","sources":["../../../src/patterns/zora-tab-bar/ZoraTabBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Pressable, Text as ReactNativeText } from 'react-native';\n\nimport { Icon } from '../../components/icon';\nimport { Box, Surface } from '../../foundation';\nimport {\n  createTabBarItemPressHandler,\n  resolveNavigationItems,\n} from '../../internal/resolveZoraNavigationItems';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ZoraTabBarProps } from './types';\n\nfunction resolveAccessibilityLabel(\n  label: React.ReactNode,\n  explicitLabel?: string,\n): string | undefined {\n  if (explicitLabel !== undefined) {\n    return explicitLabel;\n  }\n\n  if (typeof label === 'string') {\n    return label;\n  }\n\n  if (typeof label === 'number') {\n    return String(label);\n  }\n\n  return undefined;\n}\n\nfunction ZoraTabBarInner({\n  themeId: _themeId,\n  mode: _mode,\n  state,\n  navigation,\n  descriptors,\n  insets,\n  routeMap,\n  compact = false,\n  chrome = 'raised',\n  testID,\n}: ZoraTabBarProps) {\n  const { theme } = useZoraTheme();\n  const resolved = resolveNavigationItems({\n    state,\n    descriptors,\n    routeMap,\n    kind: 'tab',\n  });\n\n  const bottomInset = insets?.bottom ?? 0;\n  const minHeight = compact ? 56 : 64;\n  const labelSize = compact ? theme.typography.sizes.xs : theme.typography.sizes.s;\n  const labelWeight = theme.typography.weights.medium;\n  const content = (\n    <Box\n      bg=\"surface\"\n      style={{\n        borderTopColor: theme.semantics.border.default,\n        borderTopWidth: 1,\n        flexDirection: 'row',\n        minHeight: minHeight + bottomInset,\n        paddingBottom: bottomInset,\n      }}\n      testID={testID}\n    >\n      {resolved.map((item) => {\n        const { active } = item;\n        const { disabled } = item;\n        const contentColor = disabled\n          ? theme.semantics.content.subtle\n          : active\n            ? theme.semantics.action.primary.base\n            : theme.semantics.content.muted;\n        const backgroundColor = active\n          ? theme.semantics.action.primary.softBg\n          : theme.semantics.surface.default;\n\n        return (\n          <Pressable\n            accessibilityLabel={resolveAccessibilityLabel(\n              item.label,\n              item.metadata?.accessibilityLabel,\n            )}\n            accessibilityRole=\"tab\"\n            accessibilityState={{ selected: active, disabled }}\n            disabled={disabled}\n            key={item.route.key}\n            onPress={createTabBarItemPressHandler({ item, navigation })}\n            style={{\n              alignItems: 'center',\n              backgroundColor,\n              flex: 1,\n              justifyContent: 'center',\n              minHeight,\n              opacity: disabled ? 0.48 : 1,\n              paddingHorizontal: theme.spacing.s,\n              paddingVertical: compact ? theme.spacing.xs : theme.spacing.s,\n            }}\n            testID={\n              item.metadata?.testID ?? (testID ? `${testID}-item-${item.route.key}` : undefined)\n            }\n          >\n            {item.metadata?.icon ? (\n              <Icon\n                color={contentColor}\n                name={item.metadata.icon.name}\n                provider={item.metadata.icon.provider}\n                size={compact ? theme.spacing.m : theme.spacing.l}\n              />\n            ) : null}\n            <ReactNativeText\n              numberOfLines={1}\n              style={{\n                color: contentColor,\n                fontSize: labelSize,\n                fontWeight: labelWeight,\n                lineHeight: compact ? 16 : 20,\n                marginTop: item.metadata?.icon ? theme.spacing.xs : 0,\n                textAlign: 'center',\n              }}\n            >\n              {item.label}\n            </ReactNativeText>\n          </Pressable>\n        );\n      })}\n    </Box>\n  );\n\n  if (chrome === 'none') {\n    return content;\n  }\n\n  return (\n    <Surface variant=\"raised\" testID={testID ? `${testID}-chrome` : undefined}>\n      {content}\n    </Surface>\n  );\n}\n\nexport const ZoraTabBar = withZoraThemeScope(ZoraTabBarInner);\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -45,7 +45,7 @@
   "dependencies": {
     "@ankhorage/color-theory": "^0.0.7",
     "@ankhorage/contracts": "^1.3.1",
-    "@ankhorage/surface": "^1.4.0"
+    "@ankhorage/surface": "^2.0.0"
   },
   "files": [
     "dist",

package/src/components/app-bar/AppBar.tsx

@@ -56,9 +56,9 @@ function AppBarInner({
       <IconButton
         icon={resolvedMode.cancelIcon ?? DEFAULT_CANCEL_ICON}
         label={resolveCancelLabel(resolvedMode)}
-        emphasis="ghost"
+        variant="ghost"
         size="m"
-        tone="neutral"
+        color="neutral"
         onPress={resolvedMode.onCancel}
       />
     ) : undefined);
@@ -68,9 +68,9 @@ function AppBarInner({
       disabled={overflow.disabled}
       icon={overflow.icon ?? DEFAULT_OVERFLOW_ICON}
       label={resolveOverflowLabel(overflow)}
-      emphasis="ghost"
+      variant="ghost"
       size="m"
-      tone="neutral"
+      color="neutral"
       onPress={overflow.onPress}
     />
   ) : null;
@@ -90,7 +90,7 @@ function AppBarInner({
 
     if (isSelectionMode) {
       return (
-        <Text numberOfLines={1} tone="default" variant="label" weight="semiBold">
+        <Text numberOfLines={1} emphasis="default" variant="label" weight="semiBold">
           {resolveSelectionLabel(resolvedMode)}
         </Text>
       );
@@ -108,7 +108,7 @@ function AppBarInner({
           </Heading>
         ) : null}
         {subtitle != null ? (
-          <Text ellipsizeMode="tail" numberOfLines={1} tone="muted" variant="bodySmall">
+          <Text ellipsizeMode="tail" numberOfLines={1} emphasis="muted" variant="bodySmall">
             {subtitle}
           </Text>
         ) : null}