@ankhorage/surface 5.0.0 → 6.0.0

package/src/utils/resolveViewStyles.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, test } from 'bun:test';
+
+import type { SurfaceTheme } from '../theme/types';
+import { resolveViewStyles } from './resolveViewStyles';
+
+const mockTheme = {
+  spacing: { s: 4, m: 8, l: 16 },
+  radii: { m: 8 },
+  colors: { primary: '#007AFF', surface: '#FFFFFF' },
+} as unknown as SurfaceTheme;
+
+describe('resolveViewStyles spacing and responsive layout', () => {
+  test('resolves padding and margins correctly', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', { p: 's', m: 8 });
+    expect(styles.padding).toBe(4);
+    expect(styles.margin).toBe(8);
+  });
+
+  test('resolves responsive properties', () => {
+    const props = { p: { base: 's', lg: 'l' }, direction: { base: 'column', lg: 'row' } } as const;
+    expect(resolveViewStyles(mockTheme, 'base', props).padding).toBe(4);
+    expect(resolveViewStyles(mockTheme, 'base', props).flexDirection).toBe('column');
+    expect(resolveViewStyles(mockTheme, 'lg', props).padding).toBe(16);
+    expect(resolveViewStyles(mockTheme, 'lg', props).flexDirection).toBe('row');
+  });
+
+  test('resolves gap tokens with native flex layout props', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {
+      align: 'center',
+      gap: 'm',
+      justify: 'space-between',
+      wrap: 'wrap',
+    });
+    expect(styles.alignItems).toBe('center');
+    expect(styles.gap).toBe(8);
+    expect(styles.justifyContent).toBe('space-between');
+    expect(styles.flexWrap).toBe('wrap');
+  });
+});
+
+describe('resolveViewStyles visual and dimension styles', () => {
+  test('resolves colors and border styles', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {
+      bg: 'primary',
+      radius: 'm',
+      borderWidth: 1,
+      borderColor: 'surface',
+    });
+    expect(styles.backgroundColor).toBe('#007AFF');
+    expect(styles.borderRadius).toBe(8);
+    expect(styles.borderWidth).toBe(1);
+    expect(styles.borderColor).toBe('#FFFFFF');
+  });
+
+  test('resolves spacing tokens for dimension props and preserves raw strings', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {
+      width: 'm',
+      minHeight: 'l',
+      maxWidth: '50%',
+    });
+    expect(styles.width).toBe(8);
+    expect(styles.minHeight).toBe(16);
+    expect(styles.maxWidth).toBe('50%');
+  });
+
+  test('handles undefined props gracefully', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {});
+    expect(styles.padding).toBeUndefined();
+    expect(styles.margin).toBeUndefined();
+  });
+});

package/src/utils/{resolveBoxStyles.ts → resolveViewStyles.ts}

@@ -4,14 +4,14 @@ import { resolveResponsive } from '../core/responsive/resolve';
 import type { Breakpoint } from '../core/responsive/types';
 import { resolveToken } from '../theme/resolveToken';
 import type { SurfaceTheme } from '../theme/types';
-import type { BoxStyleProps, ColorValue } from '../types/layout';
+import type { ColorValue, ViewStyleProps } from '../types/layout';
 import { resolveSpacing } from './resolveSpacing';
 
-/*** Resolves responsive Box style props into one React Native view style. */
-export function resolveBoxStyles(
+/*** Resolves responsive Surface View style props into one React Native view style. */
+export function resolveViewStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     elevation: 0,
@@ -22,11 +22,11 @@ export function resolveBoxStyles(
   };
 }
 
-/*** Resolves padding and margin styles from responsive spacing props. */
+/*** Resolves padding, margin, and gap styles from responsive spacing props. */
 function resolveSpacingStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     padding: resolveSpacing(theme, resolveResponsive(props.p, breakpoint)),
@@ -43,6 +43,9 @@ function resolveSpacingStyles(
     marginBottom: resolveSpacing(theme, resolveResponsive(props.mb, breakpoint)),
     marginLeft: resolveSpacing(theme, resolveResponsive(props.ml, breakpoint)),
     marginRight: resolveSpacing(theme, resolveResponsive(props.mr, breakpoint)),
+    gap: resolveSpacing(theme, resolveResponsive(props.gap, breakpoint)),
+    rowGap: resolveSpacing(theme, resolveResponsive(props.rowGap, breakpoint)),
+    columnGap: resolveSpacing(theme, resolveResponsive(props.columnGap, breakpoint)),
   };
 }
 
@@ -50,7 +53,7 @@ function resolveSpacingStyles(
 function resolveVisualStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     backgroundColor: resolveColor(theme, resolveResponsive(props.bg, breakpoint)),
@@ -64,7 +67,7 @@ function resolveVisualStyles(
 function resolveDimensionStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     width: resolveDimension(
@@ -95,12 +98,16 @@ function resolveDimensionStyles(
 }
 
 /*** Resolves responsive flex, positioning, and visibility styles. */
-function resolveLayoutStyles(breakpoint: Breakpoint, props: BoxStyleProps): ViewStyle {
+function resolveLayoutStyles(breakpoint: Breakpoint, props: ViewStyleProps): ViewStyle {
   return {
     flex: resolveResponsive(props.flex, breakpoint),
     flexGrow: resolveResponsive(props.flexGrow, breakpoint),
     flexShrink: resolveResponsive(props.flexShrink, breakpoint),
     flexBasis: resolveResponsive(props.flexBasis, breakpoint) as ViewStyle['flexBasis'],
+    flexDirection: resolveResponsive(props.direction, breakpoint),
+    alignItems: resolveResponsive(props.align, breakpoint),
+    justifyContent: resolveResponsive(props.justify, breakpoint),
+    flexWrap: resolveResponsive(props.wrap, breakpoint),
     alignSelf: resolveResponsive(props.alignSelf, breakpoint),
     position: resolveResponsive(props.position, breakpoint),
     top: resolveResponsive(props.top, breakpoint),

package/src/webAcceptance.test.tsx

@@ -8,18 +8,17 @@ await mock.module('react-native', () => ReactNativeWeb);
 
 const scrollContentStyle = { padding: 4 };
 
-const { Container, Grid } = await import('./features/layout/public');
+const { Grid, ScrollView, View } = await import('./features/layout/public');
 const { KeyboardAvoidingView } = await import('./features/keyboard-avoiding-view/public');
-const { ScrollArea } = await import('./layout/ScrollArea');
-const { Show } = await import('./layout/Show');
+const { Show } = await import('./core/responsive/Show');
 const { OverlayProvider } = await import('./internal/overlay/OverlayProvider');
 const { ThemeProvider } = await import('./theme/ThemeContext');
 
 function ResponsiveAcceptanceTree() {
   return (
     <ThemeProvider>
-      <Container maxWidth={{ base: 640, md: 960 }} px={{ base: 12, md: 24 }} testID="container">
-        <ScrollArea contentContainerStyle={scrollContentStyle} testID="scroll-area">
+      <View maxWidth={{ base: 640, md: 960 }} px={{ base: 12, md: 24 }} testID="container">
+        <ScrollView contentContainerStyle={scrollContentStyle} testID="scroll-view">
           <Grid cols={{ base: 1, md: 2 }} gap={{ base: 8, md: 16 }} testID="grid">
             <ReactNativeWeb.View testID="grid-first" />
             <ReactNativeWeb.View testID="grid-second" />
@@ -30,8 +29,8 @@ function ResponsiveAcceptanceTree() {
           >
             <ReactNativeWeb.Text>wide-content</ReactNativeWeb.Text>
           </Show>
-        </ScrollArea>
-      </Container>
+        </ScrollView>
+      </View>
     </ThemeProvider>
   );
 }
@@ -40,7 +39,7 @@ test('RN Web 0.21 statically renders and hydrates representative responsive prim
   const markup = renderToString(<ResponsiveAcceptanceTree />);
 
   expect(markup).toContain('data-testid="container"');
-  expect(markup).toContain('data-testid="scroll-area"');
+  expect(markup).toContain('data-testid="scroll-view"');
   expect(markup).toContain('data-testid="grid"');
   expect(markup).toContain('static-fallback');
   expect(markup).not.toContain('wide-content');
@@ -68,7 +67,7 @@ test('RN Web 0.21 statically renders and hydrates representative responsive prim
     await act(async () => Promise.resolve());
 
     expect(container.querySelector('[data-testid="container"]')).not.toBeNull();
-    expect(container.querySelector('[data-testid="scroll-area"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="scroll-view"]')).not.toBeNull();
     expect(container.querySelectorAll('[data-testid^="grid-"]')).toHaveLength(2);
     expect(hydrationErrors).toEqual([]);
 

package/dist/components/modal/Modal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,iBAA6B,EAC7B,MAAM,GACP,EAAE,UAAU,4BA0EZ"}

package/dist/components/modal/Modal.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import { Surface } from '../../features/surface/public';
-import { FocusScope } from '../../internal/focus/FocusScope';
-import { Portal } from '../../internal/overlay/Portal';
-import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
-import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Center } from '../../layout';
-import { useTheme } from '../../theme/ThemeContext';
-const boxNonePointerEvents = resolvePointerEvents('box-none');
-export function Modal({ visible, onDismiss, children, closeOnBackdrop = true, interactionPolicy = 'enabled', testID, }) {
-    const { theme } = useTheme();
-    const animation = resolveOverlayAnimation('modal');
-    const passive = interactionPolicy === 'passive';
-    if (!visible) {
-        return null;
-    }
-    return (<Portal layer="modal" visible={visible}>
-      <View {...boxNonePointerEvents.props} style={[
-            boxNonePointerEvents.style,
-            {
-                bottom: 0,
-                left: 0,
-                position: 'absolute',
-                right: 0,
-                top: 0,
-            },
-        ]}>
-        <Pressable onPress={passive ? undefined : 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={passive ? undefined : onDismiss} testID={testID ? `${testID}-focus` : undefined}>
-          <Center p="l" style={{
-            flex: 1,
-        }}>
-            <View accessible accessibilityViewIsModal style={{
-            maxWidth: 560,
-            width: '100%',
-        }}>
-              <Surface p="l" style={{
-            shadowOpacity: 0.14,
-            shadowRadius: 18,
-            shadowOffset: { width: 0, height: 8 },
-        }} testID={testID} variant="raised">
-                {children}
-              </Surface>
-            </View>
-          </Center>
-        </FocusScope>
-      </View>
-    </Portal>);
-}
-//# sourceMappingURL=Modal.js.map

package/dist/components/modal/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Pressable, View } from 'react-native';\n\nimport { Surface } from '../../features/surface/public';\nimport { FocusScope } from '../../internal/focus/FocusScope';\nimport { Portal } from '../../internal/overlay/Portal';\nimport { resolvePointerEvents } from '../../internal/resolvePointerEvents';\nimport { resolveOverlayAnimation } from '../../internal/resolvers';\nimport { Center } from '../../layout';\nimport { useTheme } from '../../theme/ThemeContext';\nimport type { ModalProps } from './types';\n\nconst boxNonePointerEvents = resolvePointerEvents('box-none');\n\nexport function Modal({\n  visible,\n  onDismiss,\n  children,\n  closeOnBackdrop = true,\n  interactionPolicy = 'enabled',\n  testID,\n}: ModalProps) {\n  const { theme } = useTheme();\n  const animation = resolveOverlayAnimation('modal');\n  const passive = interactionPolicy === 'passive';\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <Portal layer=\"modal\" visible={visible}>\n      <View\n        {...boxNonePointerEvents.props}\n        style={[\n          boxNonePointerEvents.style,\n          {\n            bottom: 0,\n            left: 0,\n            position: 'absolute',\n            right: 0,\n            top: 0,\n          },\n        ]}\n      >\n        <Pressable\n          onPress={passive ? undefined : closeOnBackdrop ? onDismiss : undefined}\n          style={{\n            backgroundColor: theme.semantics.neutral.text,\n            bottom: 0,\n            left: 0,\n            opacity: animation.backdropOpacity,\n            position: 'absolute',\n            right: 0,\n            top: 0,\n          }}\n          testID={testID ? `${testID}-backdrop` : undefined}\n        />\n        <FocusScope\n          active={visible}\n          onEscape={passive ? undefined : onDismiss}\n          testID={testID ? `${testID}-focus` : undefined}\n        >\n          <Center\n            p=\"l\"\n            style={{\n              flex: 1,\n            }}\n          >\n            <View\n              accessible\n              accessibilityViewIsModal\n              style={{\n                maxWidth: 560,\n                width: '100%',\n              }}\n            >\n              <Surface\n                p=\"l\"\n                style={{\n                  shadowOpacity: 0.14,\n                  shadowRadius: 18,\n                  shadowOffset: { width: 0, height: 8 },\n                }}\n                testID={testID}\n                variant=\"raised\"\n              >\n                {children}\n              </Surface>\n            </View>\n          </Center>\n        </FocusScope>\n      </View>\n    </Portal>\n  );\n}\n"]}

package/dist/components/modal/index.d.ts

@@ -1,3 +0,0 @@
-export { Modal } from './Modal';
-export type { ModalProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/modal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/modal/index.js

@@ -1,2 +0,0 @@
-export { Modal } from './Modal';
-//# sourceMappingURL=index.js.map

package/dist/components/modal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Modal } from './Modal';\nexport type { ModalProps } from './types';\n"]}

package/dist/components/modal/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/modal/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/components/modal/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/modal/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { InteractionPolicy } from '../../interactionPolicy';\n\nexport interface ModalProps {\n  visible: boolean;\n  onDismiss?: (() => void) | undefined;\n  children?: React.ReactNode;\n  closeOnBackdrop?: boolean;\n  interactionPolicy?: InteractionPolicy;\n  testID?: string;\n}\n"]}

package/dist/components/tabs/Tab.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { TabProps } from './types';
-export declare function Tab({ value, children, disabled, interactionPolicy, testID, }: TabProps): React.JSX.Element;
-//# sourceMappingURL=Tab.d.ts.map

package/dist/components/tabs/Tab.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,iBAA6B,EAC7B,MAAM,GACP,EAAE,QAAQ,qBAyEV"}

package/dist/components/tabs/Tab.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import { Box } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { useTheme } from '../../theme/ThemeContext';
-import { useTabsContext } from './context';
-export function Tab({ value, children, disabled = false, interactionPolicy = 'enabled', testID, }) {
-    const { theme } = useTheme();
-    const { activeValue, getPanelId, getTabId, registerTab, setActiveValue, setFocusedValue, unregisterTab, } = useTabsContext();
-    const pressableRef = React.useRef(null);
-    const selected = activeValue === value;
-    const tabId = getTabId(value);
-    const panelId = getPanelId(value);
-    const passive = interactionPolicy === 'passive';
-    React.useEffect(() => {
-        registerTab({
-            disabled,
-            focus: () => {
-                const focusable = pressableRef.current;
-                focusable?.focus?.();
-            },
-            value,
-        });
-        return () => {
-            unregisterTab(value);
-        };
-    }, [disabled, registerTab, unregisterTab, value]);
-    return (<Pressable accessibilityLabel={undefined} accessibilityRole="tab" accessibilityState={{ disabled, selected }} nativeID={tabId} aria-controls={panelId} disabled={disabled} onFocus={() => setFocusedValue(value)} onBlur={() => setFocusedValue(undefined)} onPress={passive
-            ? undefined
-            : () => {
-                if (!disabled) {
-                    setActiveValue(value);
-                }
-            }} ref={pressableRef} testID={testID}>
-      <Box px="m" py="s" style={{
-            borderBottomColor: selected
-                ? theme.semantics.action.primary.base
-                : theme.semantics.border.default,
-            borderBottomWidth: 2,
-            opacity: disabled ? 0.64 : 1,
-        }}>
-        <Text color={selected ? 'primary' : undefined} variant="label" weight="medium">
-          {children}
-        </Text>
-      </Box>
-    </Pressable>);
-}
-//# sourceMappingURL=Tab.js.map

package/dist/components/tabs/Tab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport { Box } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { useTheme } from '../../theme/ThemeContext';\nimport { useTabsContext } from './context';\nimport type { TabProps } from './types';\n\nexport function Tab({\n  value,\n  children,\n  disabled = false,\n  interactionPolicy = 'enabled',\n  testID,\n}: TabProps) {\n  const { theme } = useTheme();\n  const {\n    activeValue,\n    getPanelId,\n    getTabId,\n    registerTab,\n    setActiveValue,\n    setFocusedValue,\n    unregisterTab,\n  } = useTabsContext();\n  const pressableRef = React.useRef<React.ElementRef<typeof Pressable> | null>(null);\n  const selected = activeValue === value;\n  const tabId = getTabId(value);\n  const panelId = getPanelId(value);\n  const passive = interactionPolicy === 'passive';\n\n  React.useEffect(() => {\n    registerTab({\n      disabled,\n      focus: () => {\n        const focusable = pressableRef.current as unknown as {\n          focus?: (() => void) | undefined;\n        } | null;\n        focusable?.focus?.();\n      },\n      value,\n    });\n\n    return () => {\n      unregisterTab(value);\n    };\n  }, [disabled, registerTab, unregisterTab, value]);\n\n  return (\n    <Pressable\n      accessibilityLabel={undefined}\n      accessibilityRole=\"tab\"\n      accessibilityState={{ disabled, selected }}\n      nativeID={tabId}\n      aria-controls={panelId}\n      disabled={disabled}\n      onFocus={() => setFocusedValue(value)}\n      onBlur={() => setFocusedValue(undefined)}\n      onPress={\n        passive\n          ? undefined\n          : () => {\n              if (!disabled) {\n                setActiveValue(value);\n              }\n            }\n      }\n      ref={pressableRef}\n      testID={testID}\n    >\n      <Box\n        px=\"m\"\n        py=\"s\"\n        style={{\n          borderBottomColor: selected\n            ? theme.semantics.action.primary.base\n            : theme.semantics.border.default,\n          borderBottomWidth: 2,\n          opacity: disabled ? 0.64 : 1,\n        }}\n      >\n        <Text color={selected ? 'primary' : undefined} variant=\"label\" weight=\"medium\">\n          {children}\n        </Text>\n      </Box>\n    </Pressable>\n  );\n}\n"]}

package/dist/components/tabs/TabList.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { TabListProps } from './types';
-export declare function TabList({ children, testID }: TabListProps): React.JSX.Element;
-//# sourceMappingURL=TabList.d.ts.map

package/dist/components/tabs/TabList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,YAAY,qBA0CzD"}

package/dist/components/tabs/TabList.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Box } from '../../features/layout/public';
-import { useFocusManager } from '../../internal/focus/useFocusManager';
-import { useTabsContext } from './context';
-import { resolveNextTabValue } from './navigation';
-export function TabList({ children, testID }) {
-    const { bindKeydown } = useFocusManager();
-    const { focusedValue, setActiveValue, tabs } = useTabsContext();
-    React.useEffect(() => {
-        if (!focusedValue) {
-            return undefined;
-        }
-        return bindKeydown((event) => {
-            const nextValue = event.key === 'ArrowLeft' ||
-                event.key === 'ArrowRight' ||
-                event.key === 'ArrowUp' ||
-                event.key === 'ArrowDown' ||
-                event.key === 'Home' ||
-                event.key === 'End'
-                ? resolveNextTabValue(tabs, focusedValue, event.key)
-                : undefined;
-            if (!nextValue) {
-                return;
-            }
-            event.preventDefault();
-            const nextTab = tabs.find((tab) => tab.value === nextValue);
-            nextTab?.focus();
-            setActiveValue(nextValue);
-        });
-    }, [bindKeydown, focusedValue, setActiveValue, tabs]);
-    return (<Box accessibilityRole="tablist" style={{
-            flexDirection: 'row',
-        }} testID={testID}>
-      {children}
-    </Box>);
-}
-//# sourceMappingURL=TabList.js.map

package/dist/components/tabs/TabList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabList.js","sourceRoot":"","sources":["../../../src/components/tabs/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD,MAAM,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAgB;IACxD,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAC1C,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,cAAc,EAAE,CAAC;IAEhE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,WAAW,CAAC,CAAC,KAAK,EAAE,EAAE;YAC3B,MAAM,SAAS,GACb,KAAK,CAAC,GAAG,KAAK,WAAW;gBACzB,KAAK,CAAC,GAAG,KAAK,YAAY;gBAC1B,KAAK,CAAC,GAAG,KAAK,SAAS;gBACvB,KAAK,CAAC,GAAG,KAAK,WAAW;gBACzB,KAAK,CAAC,GAAG,KAAK,MAAM;gBACpB,KAAK,CAAC,GAAG,KAAK,KAAK;gBACjB,CAAC,CAAC,mBAAmB,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC;gBACpD,CAAC,CAAC,SAAS,CAAC;YAEhB,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,OAAO;YACT,CAAC;YAED,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;YAC5D,OAAO,EAAE,KAAK,EAAE,CAAC;YACjB,cAAc,CAAC,SAAS,CAAC,CAAC;QAC5B,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC;IAEtD,OAAO,CACL,CAAC,GAAG,CACF,iBAAiB,CAAC,SAAS,CAC3B,KAAK,CAAC,CAAC;YACL,aAAa,EAAE,KAAK;SACrB,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box } from '../../features/layout/public';\nimport { useFocusManager } from '../../internal/focus/useFocusManager';\nimport { useTabsContext } from './context';\nimport { resolveNextTabValue } from './navigation';\nimport type { TabListProps } from './types';\n\nexport function TabList({ children, testID }: TabListProps) {\n  const { bindKeydown } = useFocusManager();\n  const { focusedValue, setActiveValue, tabs } = useTabsContext();\n\n  React.useEffect(() => {\n    if (!focusedValue) {\n      return undefined;\n    }\n\n    return bindKeydown((event) => {\n      const nextValue =\n        event.key === 'ArrowLeft' ||\n        event.key === 'ArrowRight' ||\n        event.key === 'ArrowUp' ||\n        event.key === 'ArrowDown' ||\n        event.key === 'Home' ||\n        event.key === 'End'\n          ? resolveNextTabValue(tabs, focusedValue, event.key)\n          : undefined;\n\n      if (!nextValue) {\n        return;\n      }\n\n      event.preventDefault();\n      const nextTab = tabs.find((tab) => tab.value === nextValue);\n      nextTab?.focus();\n      setActiveValue(nextValue);\n    });\n  }, [bindKeydown, focusedValue, setActiveValue, tabs]);\n\n  return (\n    <Box\n      accessibilityRole=\"tablist\"\n      style={{\n        flexDirection: 'row',\n      }}\n      testID={testID}\n    >\n      {children}\n    </Box>\n  );\n}\n"]}

package/dist/components/tabs/TabPanel.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { TabPanelProps } from './types';
-export declare function TabPanel({ value, children, testID }: TabPanelProps): React.JSX.Element | null;
-//# sourceMappingURL=TabPanel.d.ts.map

package/dist/components/tabs/TabPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,aAAa,4BAoBlE"}

package/dist/components/tabs/TabPanel.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useTabsContext } from './context';
-const TAB_PANEL_ROLE = 'tabpanel';
-export function TabPanel({ value, children, testID }) {
-    const { activeValue, getPanelId, getTabId } = useTabsContext();
-    if (activeValue !== value) {
-        return null;
-    }
-    const tabId = getTabId(value);
-    const panelId = getPanelId(value);
-    return (<View accessibilityLabelledBy={tabId} accessibilityRole={TAB_PANEL_ROLE} nativeID={panelId} testID={testID}>
-      {children}
-    </View>);
-}
-//# sourceMappingURL=TabPanel.js.map

package/dist/components/tabs/TabPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/tabs/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAG3C,MAAM,cAAc,GAAG,UAAoE,CAAC;AAE5F,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAiB;IACjE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAE/D,IAAI,WAAW,KAAK,KAAK,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IAElC,OAAO,CACL,CAAC,IAAI,CACH,uBAAuB,CAAC,CAAC,KAAK,CAAC,CAC/B,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAClC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAClB,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { useTabsContext } from './context';\nimport type { TabPanelProps } from './types';\n\nconst TAB_PANEL_ROLE = 'tabpanel' as React.ComponentProps<typeof View>['accessibilityRole'];\n\nexport function TabPanel({ value, children, testID }: TabPanelProps) {\n  const { activeValue, getPanelId, getTabId } = useTabsContext();\n\n  if (activeValue !== value) {\n    return null;\n  }\n\n  const tabId = getTabId(value);\n  const panelId = getPanelId(value);\n\n  return (\n    <View\n      accessibilityLabelledBy={tabId}\n      accessibilityRole={TAB_PANEL_ROLE}\n      nativeID={panelId}\n      testID={testID}\n    >\n      {children}\n    </View>\n  );\n}\n"]}

package/dist/components/tabs/Tabs.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { TabsProps } from './types';
-export declare function Tabs({ children, value, defaultValue, onValueChange, testID }: TabsProps): React.JSX.Element;
-//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,SAAS,qBA0DvF"}

package/dist/components/tabs/Tabs.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Box } from '../../features/layout/public';
-import { useControllableState } from '../../internal/useControllableState';
-import { getTabId as resolveTabId, getTabPanelId as resolveTabPanelId } from './a11y';
-import { TabsContext } from './context';
-export function Tabs({ children, value, defaultValue, onValueChange, testID }) {
-    const [activeValue, setActiveValue] = useControllableState({
-        value,
-        defaultValue,
-        onChange: (nextValue) => {
-            if (nextValue !== undefined) {
-                onValueChange?.(nextValue);
-            }
-        },
-    });
-    const [focusedValue, setFocusedValue] = React.useState(undefined);
-    const [tabs, setTabs] = React.useState([]);
-    const registerTab = React.useCallback((tab) => {
-        setTabs((current) => {
-            return current.some((entry) => entry.value === tab.value)
-                ? current.map((entry) => (entry.value === tab.value ? tab : entry))
-                : [...current, tab];
-        });
-    }, []);
-    const unregisterTab = React.useCallback((valueToRemove) => {
-        setTabs((current) => current.filter((entry) => entry.value !== valueToRemove));
-    }, []);
-    React.useEffect(() => {
-        if (activeValue !== undefined) {
-            return;
-        }
-        const firstEnabledTab = tabs.find((entry) => !entry.disabled);
-        if (firstEnabledTab) {
-            setActiveValue(firstEnabledTab.value);
-        }
-    }, [activeValue, setActiveValue, tabs]);
-    const contextValue = React.useMemo(() => ({
-        activeValue,
-        focusedValue,
-        getPanelId: (tabValue) => resolveTabPanelId(testID, tabValue),
-        getTabId: (tabValue) => resolveTabId(testID, tabValue),
-        registerTab,
-        setActiveValue: (nextValue) => {
-            setActiveValue(nextValue);
-        },
-        setFocusedValue,
-        tabs,
-        unregisterTab,
-    }), [activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab]);
-    return (<TabsContext value={contextValue}>
-      <Box testID={testID}>{children}</Box>
-    </TabsContext>);
-}
-//# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Box } from '../../features/layout/public';\nimport { useControllableState } from '../../internal/useControllableState';\nimport { getTabId as resolveTabId, getTabPanelId as resolveTabPanelId } from './a11y';\nimport { type TabRegistration, TabsContext } from './context';\nimport type { TabsProps } from './types';\n\nexport function Tabs({ children, value, defaultValue, onValueChange, testID }: TabsProps) {\n  const [activeValue, setActiveValue] = useControllableState<string | undefined>({\n    value,\n    defaultValue,\n    onChange: (nextValue) => {\n      if (nextValue !== undefined) {\n        onValueChange?.(nextValue);\n      }\n    },\n  });\n  const [focusedValue, setFocusedValue] = React.useState<string | undefined>(undefined);\n  const [tabs, setTabs] = React.useState<TabRegistration[]>([]);\n\n  const registerTab = React.useCallback((tab: TabRegistration) => {\n    setTabs((current) => {\n      return current.some((entry) => entry.value === tab.value)\n        ? current.map((entry) => (entry.value === tab.value ? tab : entry))\n        : [...current, tab];\n    });\n  }, []);\n\n  const unregisterTab = React.useCallback((valueToRemove: string) => {\n    setTabs((current) => current.filter((entry) => entry.value !== valueToRemove));\n  }, []);\n\n  React.useEffect(() => {\n    if (activeValue !== undefined) {\n      return;\n    }\n\n    const firstEnabledTab = tabs.find((entry) => !entry.disabled);\n    if (firstEnabledTab) {\n      setActiveValue(firstEnabledTab.value);\n    }\n  }, [activeValue, setActiveValue, tabs]);\n\n  const contextValue = React.useMemo(\n    () => ({\n      activeValue,\n      focusedValue,\n      getPanelId: (tabValue: string) => resolveTabPanelId(testID, tabValue),\n      getTabId: (tabValue: string) => resolveTabId(testID, tabValue),\n      registerTab,\n      setActiveValue: (nextValue: string) => {\n        setActiveValue(nextValue);\n      },\n      setFocusedValue,\n      tabs,\n      unregisterTab,\n    }),\n    [activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab],\n  );\n\n  return (\n    <TabsContext value={contextValue}>\n      <Box testID={testID}>{children}</Box>\n    </TabsContext>\n  );\n}\n"]}

package/dist/components/tabs/a11y.d.ts

@@ -1,3 +0,0 @@
-export declare function getTabId(testID: string | undefined, value: string): string;
-export declare function getTabPanelId(testID: string | undefined, value: string): string;
-//# sourceMappingURL=a11y.d.ts.map

package/dist/components/tabs/a11y.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/a11y.ts"],"names":[],"mappings":"AAQA,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE1E;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE/E"}

package/dist/components/tabs/a11y.js

@@ -1,13 +0,0 @@
-function sanitizeTabValue(value) {
-    return value.trim().replace(/[^a-zA-Z0-9_-]+/g, '-');
-}
-function createTabsIdBase(testID) {
-    return testID ? `${testID}-tabs` : 'tabs';
-}
-export function getTabId(testID, value) {
-    return `${createTabsIdBase(testID)}-tab-${sanitizeTabValue(value)}`;
-}
-export function getTabPanelId(testID, value) {
-    return `${createTabsIdBase(testID)}-panel-${sanitizeTabValue(value)}`;
-}
-//# sourceMappingURL=a11y.js.map

package/dist/components/tabs/a11y.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"a11y.js","sourceRoot":"","sources":["../../../src/components/tabs/a11y.ts"],"names":[],"mappings":"AAAA,SAAS,gBAAgB,CAAC,KAAa;IACrC,OAAO,KAAK,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC;AACvD,CAAC;AAED,SAAS,gBAAgB,CAAC,MAA0B;IAClD,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,MAA0B,EAAE,KAAa;IAChE,OAAO,GAAG,gBAAgB,CAAC,MAAM,CAAC,QAAQ,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;AACtE,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,MAA0B,EAAE,KAAa;IACrE,OAAO,GAAG,gBAAgB,CAAC,MAAM,CAAC,UAAU,gBAAgB,CAAC,KAAK,CAAC,EAAE,CAAC;AACxE,CAAC","sourcesContent":["function sanitizeTabValue(value: string): string {\n  return value.trim().replace(/[^a-zA-Z0-9_-]+/g, '-');\n}\n\nfunction createTabsIdBase(testID: string | undefined): string {\n  return testID ? `${testID}-tabs` : 'tabs';\n}\n\nexport function getTabId(testID: string | undefined, value: string): string {\n  return `${createTabsIdBase(testID)}-tab-${sanitizeTabValue(value)}`;\n}\n\nexport function getTabPanelId(testID: string | undefined, value: string): string {\n  return `${createTabsIdBase(testID)}-panel-${sanitizeTabValue(value)}`;\n}\n"]}

package/dist/components/tabs/context.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-export interface TabRegistration {
-    disabled: boolean;
-    focus: () => void;
-    value: string;
-}
-export interface TabsContextValue {
-    activeValue: string | undefined;
-    focusedValue: string | undefined;
-    getPanelId: (value: string) => string;
-    getTabId: (value: string) => string;
-    registerTab: (tab: TabRegistration) => void;
-    setActiveValue: (value: string) => void;
-    setFocusedValue: (value: string | undefined) => void;
-    tabs: TabRegistration[];
-    unregisterTab: (value: string) => void;
-}
-export declare const TabsContext: React.Context<TabsContextValue | null>;
-export declare function useTabsContext(): TabsContextValue;
-//# sourceMappingURL=context.d.ts.map

package/dist/components/tabs/context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,WAAW,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,wCAAqD,CAAC;AAE9E,wBAAgB,cAAc,IAAI,gBAAgB,CAQjD"}

package/dist/components/tabs/context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/tabs/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI,CAAC,CAAC;AAE9E,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAErC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IACjE,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import React from 'react';\n\nexport interface TabRegistration {\n  disabled: boolean;\n  focus: () => void;\n  value: string;\n}\n\nexport interface TabsContextValue {\n  activeValue: string | undefined;\n  focusedValue: string | undefined;\n  getPanelId: (value: string) => string;\n  getTabId: (value: string) => string;\n  registerTab: (tab: TabRegistration) => void;\n  setActiveValue: (value: string) => void;\n  setFocusedValue: (value: string | undefined) => void;\n  tabs: TabRegistration[];\n  unregisterTab: (value: string) => void;\n}\n\nexport const TabsContext = React.createContext<TabsContextValue | null>(null);\n\nexport function useTabsContext(): TabsContextValue {\n  const value = React.use(TabsContext);\n\n  if (!value) {\n    throw new Error('Tabs components must be used within <Tabs>.');\n  }\n\n  return value;\n}\n"]}

package/dist/components/tabs/index.d.ts

@@ -1,6 +0,0 @@
-export { Tab } from './Tab';
-export { TabList } from './TabList';
-export { TabPanel } from './TabPanel';
-export { Tabs } from './Tabs';
-export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}