@ankhorage/surface 2.0.0 → 2.0.2

package/dist/examples/DocsExamples.js

@@ -1,48 +1,72 @@
 import React from 'react';
-import { Badge, Box, Button, Checkbox, Drawer, Field, HelperText, Label, Menu, Modal, Radio, Stack, Switch, Tab, TabList, TabPanel, Tabs, Text, Textarea, TextInput, ThemeProvider, } from '../index';
+import { Button } from '../components/button';
+import { Card } from '../components/card';
+import { Checkbox } from '../components/checkbox';
+import { Drawer } from '../components/drawer';
+import { Field } from '../components/field';
+import { HelperText } from '../components/helper-text';
+import { Menu } from '../components/menu';
+import { Modal } from '../components/modal';
+import { Tab, TabList, TabPanel, Tabs } from '../components/tabs';
+import { TextInput } from '../components/text-input';
+import { ToastProvider, useToast } from '../components/toast';
+import { Tooltip } from '../components/tooltip';
+import { Box, Stack } from '../layout';
+import { Text } from '../primitives/text';
+import { ThemeProvider } from '../theme';
 const docsThemeConfig = {
-    id: 'docs-example',
-    name: 'Docs Example',
-    light: {
-        harmony: 'monochromatic',
-        primaryColor: '#2563eb',
-    },
-    dark: {
-        harmony: 'monochromatic',
-        primaryColor: '#2563eb',
-    },
+    id: 'docs',
+    name: 'Docs',
+    light: { primaryColor: '#2563EB', harmony: 'analogous' },
+    dark: { primaryColor: '#60A5FA', harmony: 'analogous' },
 };
-export function ProviderExample() {
+export function FormExample() {
     return (<ThemeProvider initialConfig={docsThemeConfig}>
       <Stack gap="m" p="l">
-        <Text variant="body">Surface starter</Text>
-        <Badge color="success" content="Foundation"/>
-        <Button color="warning" variant="soft">
-          Continue
-        </Button>
+        <Field helperText="Use your work email." label="Email" required>
+          <TextInput placeholder="you@example.com"/>
+        </Field>
+        <Checkbox checked>Accept terms</Checkbox>
+        <HelperText emphasis="muted">Looks good.</HelperText>
       </Stack>
     </ThemeProvider>);
 }
-export function FormAndOverlayExample() {
+function ToastButton() {
+    const { showToast } = useToast();
+    return (<Button onPress={() => showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })}>
+      Show toast
+    </Button>);
+}
+export function FeedbackExample() {
     return (<ThemeProvider initialConfig={docsThemeConfig}>
-      <Stack gap="m" p="l">
-        <Field helperText="We only use this for sign-in." label="Email">
-          <TextInput placeholder="name@example.com"/>
-        </Field>
-        <Field errorText="Bio is required." invalid label="Bio">
-          <Textarea placeholder="Tell us a little about yourself"/>
-        </Field>
-        <Stack gap="s">
-          <Label required>Preferences</Label>
-          <Checkbox defaultChecked>Weekly updates</Checkbox>
-          <Radio>Product announcements</Radio>
-          <Switch readOnly>Read-only setting</Switch>
-          <HelperText color="error">Invalid fields should reuse the same error color.</HelperText>
+      <ToastProvider>
+        <Stack gap="m" p="l">
+          <Tooltip content="Helpful contextual information">
+            <Text>Hover for tooltip</Text>
+          </Tooltip>
+          <ToastButton />
         </Stack>
-        <Modal visible={false}>
-          <Text>Modal content</Text>
+      </ToastProvider>
+    </ThemeProvider>);
+}
+export function OverlayExample() {
+    const [modalVisible, setModalVisible] = React.useState(false);
+    const [drawerVisible, setDrawerVisible] = React.useState(false);
+    return (<ThemeProvider initialConfig={docsThemeConfig}>
+      <Stack gap="m" p="l">
+        <Button onPress={() => setModalVisible(true)}>Open modal</Button>
+        <Button onPress={() => setDrawerVisible(true)}>Open drawer</Button>
+        <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>
+          <Card>
+            <Stack gap="s">
+              <Text variant="label" weight="semiBold">
+                Modal title
+              </Text>
+              <Text>Modal content</Text>
+            </Stack>
+          </Card>
         </Modal>
-        <Drawer visible={false}>
+        <Drawer onDismiss={() => setDrawerVisible(false)} visible={drawerVisible}>
           <Text>Drawer content</Text>
         </Drawer>
       </Stack>
@@ -66,9 +90,9 @@ export function NavigationExample() {
             <Text>Billing settings</Text>
           </TabPanel>
         </Tabs>
-        <Menu items={[
-            { id: 'edit', label: 'Edit' },
-            { disabled: true, id: 'archive', label: 'Archive' },
+        <Menu actions={[
+            { id: 'edit', title: 'Edit' },
+            { disabled: true, id: 'archive', title: 'Archive' },
         ]} trigger={<Text>Open menu</Text>}/>
         <Box>
           <Text color="success">Theme overrides can stay semantic.</Text>

package/dist/examples/DocsExamples.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocsExamples.js","sourceRoot":"","sources":["../../src/examples/DocsExamples.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {\n  Badge,\n  Box,\n  Button,\n  Checkbox,\n  Drawer,\n  Field,\n  HelperText,\n  Label,\n  Menu,\n  Modal,\n  Radio,\n  Stack,\n  Switch,\n  Tab,\n  TabList,\n  TabPanel,\n  Tabs,\n  Text,\n  Textarea,\n  TextInput,\n  ThemeProvider,\n} from '../index';\n\nconst docsThemeConfig = {\n  id: 'docs-example',\n  name: 'Docs Example',\n  light: {\n    harmony: 'monochromatic' as const,\n    primaryColor: '#2563eb',\n  },\n  dark: {\n    harmony: 'monochromatic' as const,\n    primaryColor: '#2563eb',\n  },\n};\n\nexport function ProviderExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Text variant=\"body\">Surface starter</Text>\n        <Badge color=\"success\" content=\"Foundation\" />\n        <Button color=\"warning\" variant=\"soft\">\n          Continue\n        </Button>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n\nexport function FormAndOverlayExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Field helperText=\"We only use this for sign-in.\" label=\"Email\">\n          <TextInput placeholder=\"name@example.com\" />\n        </Field>\n        <Field errorText=\"Bio is required.\" invalid label=\"Bio\">\n          <Textarea placeholder=\"Tell us a little about yourself\" />\n        </Field>\n        <Stack gap=\"s\">\n          <Label required>Preferences</Label>\n          <Checkbox defaultChecked>Weekly updates</Checkbox>\n          <Radio>Product announcements</Radio>\n          <Switch readOnly>Read-only setting</Switch>\n          <HelperText color=\"error\">Invalid fields should reuse the same error color.</HelperText>\n        </Stack>\n        <Modal visible={false}>\n          <Text>Modal content</Text>\n        </Modal>\n        <Drawer visible={false}>\n          <Text>Drawer content</Text>\n        </Drawer>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n\nexport function NavigationExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Tabs defaultValue=\"account\">\n          <TabList>\n            <Tab value=\"account\">Account</Tab>\n            <Tab disabled value=\"security\">\n              Security\n            </Tab>\n            <Tab value=\"billing\">Billing</Tab>\n          </TabList>\n          <TabPanel value=\"account\">\n            <Text>Account settings</Text>\n          </TabPanel>\n          <TabPanel value=\"billing\">\n            <Text>Billing settings</Text>\n          </TabPanel>\n        </Tabs>\n        <Menu\n          items={[\n            { id: 'edit', label: 'Edit' },\n            { disabled: true, id: 'archive', label: 'Archive' },\n          ]}\n          trigger={<Text>Open menu</Text>}\n        />\n        <Box>\n          <Text color=\"success\">Theme overrides can stay semantic.</Text>\n        </Box>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n"]}
+{"version":3,"file":"DocsExamples.js","sourceRoot":"","sources":["../../src/examples/DocsExamples.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../components/button';\nimport { Card } from '../components/card';\nimport { Checkbox } from '../components/checkbox';\nimport { Drawer } from '../components/drawer';\nimport { Field } from '../components/field';\nimport { HelperText } from '../components/helper-text';\nimport { Menu } from '../components/menu';\nimport { Modal } from '../components/modal';\nimport { Tab, TabList, TabPanel, Tabs } from '../components/tabs';\nimport { TextInput } from '../components/text-input';\nimport { ToastProvider, useToast } from '../components/toast';\nimport { Tooltip } from '../components/tooltip';\nimport { Box, Stack } from '../layout';\nimport { Text } from '../primitives/text';\nimport { ThemeProvider } from '../theme';\nimport type { ThemeConfig } from '../theme/types';\n\nconst docsThemeConfig: ThemeConfig = {\n  id: 'docs',\n  name: 'Docs',\n  light: { primaryColor: '#2563EB', harmony: 'analogous' },\n  dark: { primaryColor: '#60A5FA', harmony: 'analogous' },\n};\n\nexport function FormExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Field helperText=\"Use your work email.\" label=\"Email\" required>\n          <TextInput placeholder=\"you@example.com\" />\n        </Field>\n        <Checkbox checked>Accept terms</Checkbox>\n        <HelperText emphasis=\"muted\">Looks good.</HelperText>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n\nfunction ToastButton() {\n  const { showToast } = useToast();\n  return (\n    <Button\n      onPress={() =>\n        showToast({ description: 'Your changes were saved.', status: 'success', title: 'Saved' })\n      }\n    >\n      Show toast\n    </Button>\n  );\n}\n\nexport function FeedbackExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <ToastProvider>\n        <Stack gap=\"m\" p=\"l\">\n          <Tooltip content=\"Helpful contextual information\">\n            <Text>Hover for tooltip</Text>\n          </Tooltip>\n          <ToastButton />\n        </Stack>\n      </ToastProvider>\n    </ThemeProvider>\n  );\n}\n\nexport function OverlayExample() {\n  const [modalVisible, setModalVisible] = React.useState(false);\n  const [drawerVisible, setDrawerVisible] = React.useState(false);\n\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Button onPress={() => setModalVisible(true)}>Open modal</Button>\n        <Button onPress={() => setDrawerVisible(true)}>Open drawer</Button>\n        <Modal onDismiss={() => setModalVisible(false)} visible={modalVisible}>\n          <Card>\n            <Stack gap=\"s\">\n              <Text variant=\"label\" weight=\"semiBold\">\n                Modal title\n              </Text>\n              <Text>Modal content</Text>\n            </Stack>\n          </Card>\n        </Modal>\n        <Drawer onDismiss={() => setDrawerVisible(false)} visible={drawerVisible}>\n          <Text>Drawer content</Text>\n        </Drawer>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n\nexport function NavigationExample() {\n  return (\n    <ThemeProvider initialConfig={docsThemeConfig}>\n      <Stack gap=\"m\" p=\"l\">\n        <Tabs defaultValue=\"account\">\n          <TabList>\n            <Tab value=\"account\">Account</Tab>\n            <Tab disabled value=\"security\">\n              Security\n            </Tab>\n            <Tab value=\"billing\">Billing</Tab>\n          </TabList>\n          <TabPanel value=\"account\">\n            <Text>Account settings</Text>\n          </TabPanel>\n          <TabPanel value=\"billing\">\n            <Text>Billing settings</Text>\n          </TabPanel>\n        </Tabs>\n        <Menu\n          actions={[\n            { id: 'edit', title: 'Edit' },\n            { disabled: true, id: 'archive', title: 'Archive' },\n          ]}\n          trigger={<Text>Open menu</Text>}\n        />\n        <Box>\n          <Text color=\"success\">Theme overrides can stay semantic.</Text>\n        </Box>\n      </Stack>\n    </ThemeProvider>\n  );\n}\n"]}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export type { ActionSheetItemProps, ActionSheetProps } from './components/action-sheet';
+export { ActionSheet, ActionSheetItem } from './components/action-sheet';
 export type { BadgeProps } from './components/badge';
 export { Badge } from './components/badge';
 export type { ButtonIconSpec, ButtonProps } from './components/button';
@@ -18,7 +20,7 @@ export type { LabelProps } from './components/label';
 export { Label } from './components/label';
 export type { ListItemProps } from './components/list-item';
 export { ListItem } from './components/list-item';
-export type { MenuItem, MenuProps } from './components/menu';
+export type { MenuAction, MenuActionIntent, MenuItem, MenuProps } from './components/menu';
 export { Menu } from './components/menu';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,3 +1,4 @@
+export { ActionSheet, ActionSheetItem } from './components/action-sheet';
 export { Badge } from './components/badge';
 export { Button } from './components/button';
 export { Card } from './components/card';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAW3C,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,MAAM,EACN,UAAU,GACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAOzC,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonIconSpec, ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxProps } from './components/checkbox';\nexport { Checkbox } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type { FieldProps } from './components/field';\nexport { Field } from './components/field';\nexport type { HelperTextProps } from './components/helper-text';\nexport { HelperText } from './components/helper-text';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { LabelProps } from './components/label';\nexport { Label } from './components/label';\nexport type { ListItemProps } from './components/list-item';\nexport { ListItem } from './components/list-item';\nexport type { MenuItem, MenuProps } from './components/menu';\nexport { Menu } from './components/menu';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type {\n  DrawerNavigationItemProps,\n  DrawerNavigationProps,\n  NavigationItemIcon,\n  NavigationItemProps,\n  NavigationItemSpec,\n  NavigationListProps,\n  TabBarItemProps,\n  TabBarProps,\n} from './components/navigation';\nexport {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';\nexport type { RadioProps } from './components/radio';\nexport { Radio } from './components/radio';\nexport type { SwitchProps } from './components/switch';\nexport { Switch } from './components/switch';\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps } from './components/tabs';\nexport { Tab, TabList, TabPanel, Tabs } from './components/tabs';\nexport type { TextInputProps } from './components/text-input';\nexport { TextInput } from './components/text-input';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToastOptions, ToastProps, ToastStatus } from './components/toast';\nexport { Toast, ToastProvider, useToast } from './components/toast';\nexport type { TooltipProps } from './components/tooltip';\nexport { Tooltip } from './components/tooltip';\nexport type { FontRuntime } from './context/FontContext';\nexport { FontProvider, useFontContext } from './context/FontContext';\nexport type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';\nexport { TranslationProvider, useTranslationContext } from './context/TranslationContext';\nexport * from './core/responsive';\nexport * from './layout';\nexport type { ButtonBaseProps } from './primitives/button-base';\nexport { ButtonBase } from './primitives/button-base';\nexport type { HeadingLevel, HeadingProps } from './primitives/heading';\nexport { Heading } from './primitives/heading';\nexport type { IconProps, IconProvider } from './primitives/icon';\nexport { Icon } from './primitives/icon';\nexport type { ImageFit, ImageProps, SurfaceImageSource } from './primitives/image';\nexport { Image } from './primitives/image';\nexport type { TextProps } from './primitives/text';\nexport { Text } from './primitives/text';\nexport type {\n  SurfaceColor,\n  SurfaceEmphasis,\n  SurfacePaletteColor,\n  SurfaceStatusColor,\n} from './surfaceColor';\nexport {\n  SURFACE_COLORS,\n  SURFACE_EMPHASES,\n  SURFACE_PALETTE_COLORS,\n  SURFACE_STATUS_COLORS,\n} from './surfaceColor';\nexport * from './theme';\nexport { isDeepEqual } from './utils/deepEqual';\nexport { deepMerge } from './utils/deepMerge';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEzE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAW3C,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,MAAM,EACN,UAAU,GACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAOzC,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export type { ActionSheetItemProps, ActionSheetProps } from './components/action-sheet';\nexport { ActionSheet, ActionSheetItem } from './components/action-sheet';\nexport type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonIconSpec, ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxProps } from './components/checkbox';\nexport { Checkbox } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type { FieldProps } from './components/field';\nexport { Field } from './components/field';\nexport type { HelperTextProps } from './components/helper-text';\nexport { HelperText } from './components/helper-text';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { LabelProps } from './components/label';\nexport { Label } from './components/label';\nexport type { ListItemProps } from './components/list-item';\nexport { ListItem } from './components/list-item';\nexport type { MenuAction, MenuActionIntent, MenuItem, MenuProps } from './components/menu';\nexport { Menu } from './components/menu';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type {\n  DrawerNavigationItemProps,\n  DrawerNavigationProps,\n  NavigationItemIcon,\n  NavigationItemProps,\n  NavigationItemSpec,\n  NavigationListProps,\n  TabBarItemProps,\n  TabBarProps,\n} from './components/navigation';\nexport {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';\nexport type { RadioProps } from './components/radio';\nexport { Radio } from './components/radio';\nexport type { SwitchProps } from './components/switch';\nexport { Switch } from './components/switch';\nexport type { TabListProps, TabPanelProps, TabProps, TabsProps } from './components/tabs';\nexport { Tab, TabList, TabPanel, Tabs } from './components/tabs';\nexport type { TextInputProps } from './components/text-input';\nexport { TextInput } from './components/text-input';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToastOptions, ToastProps, ToastStatus } from './components/toast';\nexport { Toast, ToastProvider, useToast } from './components/toast';\nexport type { TooltipProps } from './components/tooltip';\nexport { Tooltip } from './components/tooltip';\nexport type { FontRuntime } from './context/FontContext';\nexport { FontProvider, useFontContext } from './context/FontContext';\nexport type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';\nexport { TranslationProvider, useTranslationContext } from './context/TranslationContext';\nexport * from './core/responsive';\nexport * from './layout';\nexport type { ButtonBaseProps } from './primitives/button-base';\nexport { ButtonBase } from './primitives/button-base';\nexport type { HeadingLevel, HeadingProps } from './primitives/heading';\nexport { Heading } from './primitives/heading';\nexport type { IconProps, IconProvider } from './primitives/icon';\nexport { Icon } from './primitives/icon';\nexport type { ImageFit, ImageProps, SurfaceImageSource } from './primitives/image';\nexport { Image } from './primitives/image';\nexport type { TextProps } from './primitives/text';\nexport { Text } from './primitives/text';\nexport type {\n  SurfaceColor,\n  SurfaceEmphasis,\n  SurfacePaletteColor,\n  SurfaceStatusColor,\n} from './surfaceColor';\nexport {\n  SURFACE_COLORS,\n  SURFACE_EMPHASES,\n  SURFACE_PALETTE_COLORS,\n  SURFACE_STATUS_COLORS,\n} from './surfaceColor';\nexport * from './theme';\nexport { isDeepEqual } from './utils/deepEqual';\nexport { deepMerge } from './utils/deepMerge';\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.0.7",
-    "@ankhorage/contracts": "^1.3.1"
+    "@ankhorage/contracts": "^1.7.0"
   },
   "files": [
     "dist",

package/src/components/action-sheet/ActionSheet.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { FocusScope } from '../../internal/focus/FocusScope';
+import { Portal } from '../../internal/overlay/Portal';
+import { resolveOverlayAnimation } from '../../internal/resolvers';
+import { Box, Stack, Surface } from '../../layout';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import { ActionSheetItem } from './ActionSheetItem';
+import type { ActionSheetProps } from './types';
+
+export function ActionSheet({
+  visible,
+  onDismiss,
+  title,
+  description,
+  children,
+  cancelLabel = 'Cancel',
+  closeOnBackdrop = true,
+  testID,
+}: ActionSheetProps) {
+  const { theme } = useTheme();
+  const animation = resolveOverlayAnimation('modal');
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Portal layer="modal" visible={visible}>
+      <View
+        pointerEvents="box-none"
+        style={{
+          bottom: 0,
+          left: 0,
+          position: 'absolute',
+          right: 0,
+          top: 0,
+        }}
+      >
+        <Pressable
+          onPress={closeOnBackdrop ? onDismiss : undefined}
+          style={{
+            backgroundColor: theme.semantics.neutral.text,
+            bottom: 0,
+            left: 0,
+            opacity: animation.backdropOpacity,
+            position: 'absolute',
+            right: 0,
+            top: 0,
+          }}
+          testID={testID ? `${testID}-backdrop` : undefined}
+        />
+        <FocusScope
+          active={visible}
+          onEscape={onDismiss}
+          testID={testID ? `${testID}-focus` : undefined}
+        >
+          <Box
+            pointerEvents="box-none"
+            style={{
+              flex: 1,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <View
+              accessible
+              accessibilityViewIsModal
+              style={{
+                alignSelf: 'center',
+                maxWidth: 560,
+                padding: 16,
+                width: '100%',
+              }}
+            >
+              <Surface
+                p="m"
+                style={{
+                  borderRadius: 24,
+                  shadowOpacity: 0.16,
+                  shadowRadius: 18,
+                  shadowOffset: { width: 0, height: -8 },
+                }}
+                testID={testID}
+                variant="raised"
+              >
+                <Stack gap="s">
+                  {title || description ? (
+                    <Box px="m" py="s">
+                      <Stack gap="xxs">
+                        {title ? (
+                          <Text align="center" variant="label" weight="semiBold">
+                            {title}
+                          </Text>
+                        ) : null}
+                        {description ? (
+                          <Text align="center" emphasis="muted" variant="bodySmall">
+                            {description}
+                          </Text>
+                        ) : null}
+                      </Stack>
+                    </Box>
+                  ) : null}
+                  <Stack gap="xxs">{children}</Stack>
+                  {onDismiss ? (
+                    <ActionSheetItem
+                      label={cancelLabel}
+                      onPress={onDismiss}
+                      testID={testID ? `${testID}-cancel` : undefined}
+                    />
+                  ) : null}
+                </Stack>
+              </Surface>
+            </View>
+          </Box>
+        </FocusScope>
+      </View>
+    </Portal>
+  );
+}

package/src/components/action-sheet/ActionSheetItem.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Box, Inline, Stack } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Text } from '../../primitives/text';
+import type { ActionSheetItemProps } from './types';
+
+export function ActionSheetItem({
+  label,
+  description,
+  leading,
+  trailing,
+  color,
+  disabled = false,
+  selected = false,
+  onPress,
+  testID,
+}: ActionSheetItemProps) {
+  return (
+    <ButtonBase
+      accessibilityRole="button"
+      accessibilityState={{ disabled, selected }}
+      disabled={disabled}
+      onPress={onPress}
+      radius="m"
+      testID={testID}
+    >
+      {(state) => (
+        <Box
+          px="m"
+          py="m"
+          radius="m"
+          style={{
+            opacity: state.disabled ? 0.56 : 1,
+          }}
+        >
+          <Inline align="center" gap="m" justify="space-between" wrap="nowrap">
+            {leading ? <Box>{leading}</Box> : null}
+            <Box flex={1}>
+              <Stack gap="xxs">
+                <Text color={color} variant="body" weight={selected ? 'semiBold' : 'medium'}>
+                  {label}
+                </Text>
+                {description ? (
+                  <Text emphasis="muted" variant="bodySmall">
+                    {description}
+                  </Text>
+                ) : null}
+              </Stack>
+            </Box>
+            {trailing ? <Box>{trailing}</Box> : null}
+          </Inline>
+        </Box>
+      )}
+    </ButtonBase>
+  );
+}

package/src/components/action-sheet/index.ts

@@ -0,0 +1,3 @@
+export { ActionSheet } from './ActionSheet';
+export { ActionSheetItem } from './ActionSheetItem';
+export type { ActionSheetItemProps, ActionSheetProps } from './types';

package/src/components/action-sheet/types.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+
+import type { SurfaceColor } from '../../surfaceColor';
+
+export interface ActionSheetProps {
+  visible: boolean;
+  onDismiss?: (() => void) | undefined;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  closeOnBackdrop?: boolean;
+  testID?: string;
+}
+
+export interface ActionSheetItemProps {
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  color?: SurfaceColor;
+  disabled?: boolean;
+  selected?: boolean;
+  onPress?: (() => void) | undefined;
+  testID?: string;
+}