@ankhorage/zora 1.5.1 → 2.0.0

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "1.5.1",
+  "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}

package/src/components/avatar/Avatar.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import { Image } from 'react-native';
 
 import { Box } from '../../foundation';
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Icon } from '../icon';
-import { Text, type TextTone, type TextVariant } from '../text';
+import { Text, type TextVariant } from '../text';
 import { resolveAvatarInitials } from './resolveAvatarInitials';
 import type { AvatarProps, AvatarShape, AvatarSize } from './types';
 
@@ -19,10 +19,20 @@ const AVATAR_SIZES: Record<AvatarSize, number> = {
   xl: 64,
 };
 
-function resolveRoleSemantics(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {
-  switch (tone) {
+function resolveRoleSemantics(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 'primary':
       return theme.semantics.action.primary;
+    case 'error':
+      return theme.semantics.error;
+    case 'info':
+      return theme.semantics.info;
     case 'danger':
       return theme.semantics.action.danger;
     case 'success':
@@ -35,8 +45,8 @@ function resolveRoleSemantics(theme: SurfaceTheme, tone: ZoraTone): RoleSemantic
   }
 }
 
-function resolveTextTone(tone: ZoraTone): TextTone {
-  return tone === 'neutral' ? 'default' : tone;
+function resolveTextColor(color: ZoraColor): ZoraColor | undefined {
+  return color === 'neutral' ? undefined : color;
 }
 
 function resolveTextVariant(size: AvatarSize): TextVariant {
@@ -69,20 +79,20 @@ function AvatarInner({
   label,
   size = 'm',
   shape = 'circle',
-  tone = 'neutral',
+  color = 'neutral',
 }: AvatarProps) {
   const { theme } = useZoraTheme();
   const resolvedSize = AVATAR_SIZES[size];
   const resolvedInitials = initials ?? resolveAvatarInitials(name);
-  const role = resolveRoleSemantics(theme, tone);
-  const backgroundColor = tone === 'neutral' ? theme.semantics.neutral.surface : role.softBg;
-  const contentColor = tone === 'neutral' ? theme.semantics.content.default : role.base;
+  const role = resolveRoleSemantics(theme, color);
+  const backgroundColor = color === 'neutral' ? theme.semantics.neutral.surface : role.softBg;
+  const contentColor = color === 'neutral' ? theme.semantics.content.default : role.base;
   const radius = resolveRadius(shape);
 
   const renderFallback = () => {
     if (resolvedInitials) {
       return (
-        <Text tone={resolveTextTone(tone)} variant={resolveTextVariant(size)} weight="semiBold">
+        <Text color={resolveTextColor(color)} variant={resolveTextVariant(size)} weight="semiBold">
           {resolvedInitials}
         </Text>
       );

package/src/components/avatar/types.ts

@@ -1,7 +1,7 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ImageSourcePropType } from 'react-native';
 
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl';
@@ -16,5 +16,5 @@ export interface AvatarProps extends ZoraBaseProps {
   label?: string;
   size?: AvatarSize;
   shape?: AvatarShape;
-  tone?: ZoraTone;
+  color?: ZoraColor;
 }

package/src/components/avatar-group/AvatarGroup.tsx

@@ -44,7 +44,7 @@ function AvatarGroupInner({
         shape={shape}
         size={size}
         source={item.source}
-        tone={item.tone}
+        color={item.color}
       />
     </Box>
   );
@@ -63,7 +63,7 @@ function AvatarGroupInner({
             initials={overflowLabel(overflowCount)}
             size={size}
             shape={shape}
-            tone="neutral"
+            color="neutral"
           />
         </Box>
       ) : null}

package/src/components/avatar-group/types.ts

@@ -1,7 +1,7 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ImageSourcePropType } from 'react-native';
 
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 import type { AvatarShape, AvatarSize } from '../avatar';
 
@@ -12,7 +12,7 @@ export interface AvatarGroupItem {
   initials?: string;
   iconFallback?: ButtonIconSpec;
   label?: string;
-  tone?: ZoraTone;
+  color?: ZoraColor;
 }
 
 export interface AvatarGroupProps extends ZoraBaseProps {

package/src/components/badge/Badge.tsx

@@ -9,19 +9,19 @@ function BadgeInner({
   themeId: _themeId,
   mode: _mode,
   children,
-  tone,
-  emphasis,
+  color,
+  variant,
   size,
   ...props
 }: BadgeProps) {
-  const recipe = resolveBadgeRecipe({ tone, emphasis, size });
+  const recipe = resolveBadgeRecipe({ color, variant, size });
 
   return (
     <SurfaceBadge
       {...props}
       content={children}
+      color={recipe.color}
       size={recipe.size}
-      tone={recipe.tone}
       variant={recipe.variant}
     />
   );

package/src/components/badge/types.ts

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

package/src/components/button/Button.tsx

@@ -8,15 +8,15 @@ import type { ButtonProps } from './types';
 function ButtonInner({
   themeId: _themeId,
   mode: _mode,
-  tone,
-  emphasis,
+  color,
+  variant,
   size,
   ...props
 }: ButtonProps) {
-  const recipe = resolveButtonRecipe({ tone, emphasis, size });
+  const recipe = resolveButtonRecipe({ color, variant, size });
 
   return (
-    <SurfaceButton {...props} size={recipe.size} tone={recipe.tone} variant={recipe.variant} />
+    <SurfaceButton {...props} color={recipe.color} size={recipe.size} variant={recipe.variant} />
   );
 }
 

package/src/components/button/meta.ts

@@ -1,3 +1,4 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
 import type { ZoraComponentMeta } from '../../metadata';
 
 export const buttonMeta = {
@@ -9,8 +10,8 @@ export const buttonMeta = {
     label: 'Button',
     defaultProps: {
       children: 'Continue',
-      tone: 'primary',
-      emphasis: 'solid',
+      color: 'primary',
+      variant: 'solid',
       size: 'm',
     },
   },
@@ -21,17 +22,17 @@ export const buttonMeta = {
       label: 'Label',
       default: 'Continue',
     },
-    tone: {
+    color: {
       type: 'enum',
       category: 'Style',
-      label: 'Tone',
-      enum: ['primary', 'neutral', 'danger', 'success', 'warning'],
+      label: 'Color',
+      enum: [...ZORA_COLORS],
       default: 'primary',
     },
-    emphasis: {
+    variant: {
       type: 'enum',
       category: 'Style',
-      label: 'Emphasis',
+      label: 'Variant',
       enum: ['solid', 'outline', 'ghost', 'soft'],
       default: 'solid',
     },

package/src/components/button/types.ts

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

package/src/components/card/Card.tsx

@@ -46,13 +46,13 @@ function CardInner({
             <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
               <Stack gap="xs">
                 {eyebrow ? (
-                  <Text tone="muted" variant="caption" weight="semiBold">
+                  <Text emphasis="muted" variant="caption" weight="semiBold">
                     {eyebrow}
                   </Text>
                 ) : null}
                 {title ? <Heading level={compact ? 4 : 3}>{title}</Heading> : null}
                 {description ? (
-                  <Text tone="muted" variant="bodySmall">
+                  <Text emphasis="muted" variant="bodySmall">
                     {description}
                   </Text>
                 ) : null}