@ankhorage/zora 0.0.4 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.1.0
+
+### Minor Changes
+
+- Add Studio-unblocking reusable UI elements including IconButton, Tabs, Toolbar, Select, disclosure sections, responsive panels, inspector fields, tree views, tile grids, and collection editor shells.
+
 ## 0.0.4
 
 ### Patch Changes

package/README.md

@@ -95,6 +95,34 @@ Surface, and `testID`.
 
 </details>
 
+### `IconButton`
+
+Compact icon-only button for toolbars, rows, and actions.
+
+```tsx
+<IconButton icon={{ name: 'trash-outline' }} label="Delete" tone="danger" />
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `icon` | `ButtonIconSpec` | - | Required icon to render. |
+| `label` | `string` | - | Required for `accessibilityLabel`. |
+| `tone` | `ZoraTone` | `'neutral'` | Button tone. |
+| `emphasis` | `ZoraEmphasis` | `'ghost'` | Button emphasis. |
+| `size` | `ZoraControlSize` | `'m'` | Button size. |
+
+Inherited props:
+
+Inherits behavior from Surface `IconButton` including `disabled`, `loading`,
+`onPress`, and `testID`.
+
+</details>
+
 ### `Badge`
 
 Small status label with ZORA tone, emphasis, and size defaults.
@@ -153,8 +181,8 @@ ZORA props:
 
 Inherited props:
 
-Inherits all Surface `CardProps` except `children`, `p`, `radius`, `style`, and
-`variant`. ZORA owns spacing, radius, and variant selection for this wrapper.
+Inherits all Surface `CardProps` except `children`, `p`, `radius`, `variant`, and
+`style`. ZORA owns spacing, radius, and variant selection for this wrapper.
 
 </details>
 
@@ -222,6 +250,100 @@ Surface with the same Surface exclusions and re-exposed values listed for
 
 </details>
 
+### `Tabs`
+
+Generic controlled tabs for navigation and filtering.
+
+```tsx
+<Tabs
+  items={[
+    { value: 'all', label: 'All' },
+    { value: 'active', label: 'Active' },
+  ]}
+  onValueChange={setValue}
+  value={value}
+/>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `value` | `string` | - | Active tab value. |
+| `items` | `TabItem[]` | - | Array of tab objects. |
+| `onValueChange` | `(value: string) => void` | - | Change handler. |
+| `variant` | `'underline' \| 'pill' \| 'segmented'` | `'underline'` | Visual style. |
+| `size` | `ZoraControlSize` | `'m'` | Control size. |
+
+</details>
+
+### `Toolbar`
+
+Horizontal shell for actions and tools.
+
+```tsx
+<Toolbar>
+  <ToolbarAction icon={{ name: 'add-outline' }} label="Add" />
+  <ToolbarAction icon={{ name: 'search-outline' }} label="Search" />
+</Toolbar>
+```
+
+<details>
+<summary>Props</summary>
+
+`Toolbar` props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` | - | Toolbar content. |
+| `position` | `'top' \| 'bottom' \| 'inline'` | `'inline'` | Layout position. |
+| `floating` | `boolean` | `false` | Whether the toolbar floats with a shadow. |
+| `compact` | `boolean` | `true` | Tighter padding. |
+
+`ToolbarAction` props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `icon` | `ButtonIconSpec` | - | Required icon. |
+| `label` | `string` | - | Accessibility label. |
+| `active` | `boolean` | `false` | Highlighted state. |
+| `onPress` | `() => void` | - | Click handler. |
+
+</details>
+
+### `Select`
+
+Standard dropdown selector wrapping `@react-native-picker/picker`.
+
+```tsx
+<Select
+  onValueChange={setValue}
+  options={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+  ]}
+  value={value}
+/>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `value` | `string` | - | Selected value. |
+| `options` | `SelectOption[]` | - | Array of option objects. |
+| `onValueChange` | `(value: string) => void` | - | Change handler. |
+| `invalid` | `boolean` | `false` | Error state styling. |
+| `disabled` | `boolean` | `false` | Interaction state. |
+
+</details>
+
 ### `Modal`
 
 Centered overlay shell with optional header, body, footer, and width preset.
@@ -725,6 +847,189 @@ No inherited props. `ConfirmDialogProps` is declared directly by ZORA.
 
 </details>
 
+### `DisclosureSection`
+
+Collapsible section for property groups and settings.
+
+```tsx
+<DisclosureSection title="Advanced Settings">
+  {content}
+</DisclosureSection>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `title` | `React.ReactNode` | - | Section title. |
+| `description` | `React.ReactNode` | - | Subheading text. |
+| `defaultOpen` | `boolean` | `true` | Initial state. |
+| `open` | `boolean` | - | Controlled state. |
+| `onOpenChange` | `(open: boolean) => void` | - | Toggle handler. |
+| `actions` | `React.ReactNode` | - | Extra header actions. |
+
+</details>
+
+### `ResponsivePanel`
+
+Side panel that adapts to screen size (inline or overlay).
+
+```tsx
+<ResponsivePanel onOpenChange={setOpen} open={open} title="Inspector">
+  {content}
+</ResponsivePanel>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `open` | `boolean` | - | Required visibility. |
+| `onOpenChange` | `(open: boolean) => void` | - | Required change handler. |
+| `side` | `'left' \| 'right'` | `'right'` | Layout side. |
+| `desktopMode` | `'inline' \| 'floating'` | `'inline'` | Desktop rendering style. |
+| `mobileMode` | `'drawer' \| 'modal'` | `'drawer'` | Mobile rendering style. |
+
+</details>
+
+### `InspectorField`
+
+Dense form field optimized for property panels.
+
+```tsx
+<InspectorField control={<IconButton icon={{ name: 'refresh-outline' }} label="Reset" />} label="Opacity">
+  <Input value="100%" />
+</InspectorField>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `label` | `React.ReactNode` | - | Field label. |
+| `control` | `React.ReactNode` | - | Trailing control slot. |
+| `children` | `React.ReactNode` | - | Main editor content. |
+
+Inherits all `FormField` props.
+
+</details>
+
+### `SwitchField`
+
+Labeled boolean toggle row.
+
+```tsx
+<SwitchField label="Enable Notifications" onValueChange={setVal} value={val} />
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `label` | `React.ReactNode` | - | Required label. |
+| `description` | `React.ReactNode` | - | Subheading text. |
+| `value` | `boolean` | - | Required state. |
+| `onValueChange` | `(value: boolean) => void` | - | Required handler. |
+
+</details>
+
+### `TreeView`
+
+Hierarchical list for navigation and layers.
+
+```tsx
+<TreeView
+  nodes={[
+    { id: '1', label: 'Folder', children: [{ id: '2', label: 'File' }] }
+  ]}
+  onSelect={id => console.log(id)}
+/>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `nodes` | `TreeItemNode[]` | - | Required tree data. |
+| `selectedId` | `string` | - | Active node. |
+| `expandedIds` | `string[]` | - | Controlled expansion. |
+| `onSelect` | `(id: string) => void` | - | Click handler. |
+
+</details>
+
+### `TileGrid` / `PaletteItem`
+
+Grid-based selection for palettes and toolboxes.
+
+```tsx
+<TileGrid>
+  <PaletteItem title="Red" onPress={() => setCol('red')} />
+  <PaletteItem title="Blue" onPress={() => setCol('blue')} />
+</TileGrid>
+```
+
+<details>
+<summary>Props</summary>
+
+`TileGrid` props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `columns` | `number \| 'responsive'` | `'responsive'` | Grid layout. |
+
+`PaletteItem` props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `title` | `React.ReactNode` | - | Item title. |
+| `selected` | `boolean` | `false` | Highlighted state. |
+| `onPress` | `() => void` | - | Click handler. |
+
+</details>
+
+### `CollectionEditor`
+
+Generic visual shell for editing ordered collections.
+
+```tsx
+<CollectionEditor
+  items={items}
+  renderItem={({ item }) => <Text>{item.name}</Text>}
+  onAdd={() => add()}
+  onRemove={index => remove(index)}
+/>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `items` | `readonly T[]` | - | Required collection. |
+| `renderItem` | `(props) => ReactNode` | - | Required item renderer. |
+| `onAdd` | `() => void` | - | Add handler. |
+| `onRemove` | `(index: number) => void` | - | Remove handler. |
+| `onMove` | `(from, to) => void` | - | Reorder handler. |
+
+</details>
+
 ## Theme
 
 ### `ZoraProvider`
@@ -795,12 +1100,12 @@ const zoraTheme: ThemeConfig = {
   light: {
     primaryColor: '#0f766e',
     harmony: 'analogous',
-    systemTone: 'jewel',
+                systemTone: 'jewel',
   },
   dark: {
     primaryColor: '#2dd4bf',
     harmony: 'analogous',
-    systemTone: 'jewel',
+                systemTone: 'jewel',
   },
 };
 ```
@@ -815,24 +1120,37 @@ export {
   Badge,
   Button,
   Card,
+  CollectionEditor,
   ConfirmDialog,
   createZoraTheme,
+  DisclosureSection,
   Drawer,
   EmptyState,
   FormField,
+  IconButton,
   Input,
+  InspectorField,
   Modal,
   Notice,
   Page,
   PageHeader,
   PageSection,
+  PaletteItem,
   Panel,
+  ResponsivePanel,
   SectionHeader,
+  Select,
   SettingsLayout,
   SettingsRow,
   SidebarLayout,
+  SwitchField,
+  Tabs,
   Textarea,
+  TileGrid,
+  Toolbar,
+  ToolbarAction,
   TopbarLayout,
+  TreeView,
   ZoraProvider,
   zoraTheme,
 };
@@ -842,24 +1160,37 @@ export type {
   BadgeProps,
   ButtonProps,
   CardProps,
+  CollectionEditorProps,
   ConfirmDialogProps,
+  DisclosureSectionProps,
   DrawerProps,
   EmptyStateAction,
   EmptyStateProps,
   FormFieldProps,
+  IconButtonProps,
   InputProps,
+  InspectorFieldProps,
   ModalProps,
   NoticeProps,
   PageHeaderProps,
   PageProps,
   PageSectionProps,
+  PaletteItemProps,
   PanelProps,
+  ResponsivePanelProps,
   SectionHeaderProps,
+  SelectProps,
   SettingsLayoutProps,
   SettingsRowProps,
   SidebarLayoutProps,
+  SwitchFieldProps,
+  TabsProps,
   TextareaProps,
+  TileGridProps,
+  ToolbarProps,
+  ToolbarActionProps,
   TopbarLayoutProps,
+  TreeViewProps,
   ZoraProviderProps,
   ZoraThemeOverride,
 };

package/dist/components/card/types.d.ts

@@ -1,7 +1,7 @@
 import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
 import type React from 'react';
 import type { ZoraCardTone } from '../../internal/recipes';
-export interface CardProps extends Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'style' | 'variant'> {
+export interface CardProps extends Omit<SurfaceCardProps, 'children' | 'p' | 'radius' | 'variant'> {
     children?: React.ReactNode;
     title?: React.ReactNode;
     description?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,gBAAgB,EAChB,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAClD;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,SAAS,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { IconButtonProps } from './types';
+export declare function IconButton({ icon, label, emphasis, tone, size, ...props }: IconButtonProps): React.JSX.Element;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/components/icon-button/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAkB,EAClB,IAAgB,EAChB,IAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,qBAajB"}

package/dist/components/icon-button/IconButton.js

@@ -0,0 +1,8 @@
+import { IconButton as SurfaceIconButton } from '@ankhorage/surface';
+import React from 'react';
+import { resolveButtonRecipe } from '../../internal/recipes';
+export function IconButton({ icon, label, emphasis = 'ghost', tone = 'neutral', size = 'm', ...props }) {
+    const recipe = resolveButtonRecipe({ emphasis, tone, size });
+    return (<SurfaceIconButton {...props} icon={icon} accessibilityLabel={label} size={recipe.size} tone={recipe.tone} variant={recipe.variant}/>);
+}
+//# sourceMappingURL=IconButton.js.map

package/dist/components/icon-button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,OAAO,EAClB,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,GAAG,EACV,GAAG,KAAK,EACQ;IAChB,MAAM,MAAM,GAAG,mBAAmB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,CAAC,iBAAiB,CAChB,IAAI,KAAK,CAAC,CACV,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,kBAAkB,CAAC,CAAC,KAAK,CAAC,CAC1B,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAClB,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACxB,CACH,CAAC;AACJ,CAAC"}

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,3 @@
+export * from './IconButton';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/icon-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/components/icon-button/index.js

@@ -0,0 +1,3 @@
+export * from './IconButton';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/components/icon-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icon-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/components/icon-button/types.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+export interface IconButtonProps {
+    icon: ButtonIconSpec;
+    label: string;
+    emphasis?: ZoraEmphasis;
+    tone?: ZoraTone;
+    size?: ZoraControlSize;
+    disabled?: boolean;
+    loading?: boolean;
+    onPress?: () => void;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/icon-button/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEtF,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/icon-button/types.js

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

package/dist/components/icon-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/icon-button/types.ts"],"names":[],"mappings":""}

package/dist/components/select/Select.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SelectProps } from './types';
+export declare function Select<TValue extends string = string>({ value, options, onValueChange, disabled, invalid, testID, }: SelectProps<TValue>): React.JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAAE,EACrD,KAAK,EACL,OAAO,EACP,aAAa,EACb,QAAQ,EACR,OAAO,EACP,MAAM,GACP,EAAE,WAAW,CAAC,MAAM,CAAC,qBAmCrB"}

package/dist/components/select/Select.js

@@ -0,0 +1,18 @@
+import { Box, useTheme } from '@ankhorage/surface';
+import { Picker } from '@react-native-picker/picker';
+import React from 'react';
+export function Select({ value, options, onValueChange, disabled, invalid, testID, }) {
+    const { theme } = useTheme();
+    return (<Box bg="surface" borderColor={invalid ? theme.colors.error : theme.colors.border} borderWidth={1} opacity={disabled ? 0.5 : 1} radius="m" testID={testID}>
+      <Picker enabled={!disabled} onValueChange={(itemValue) => onValueChange(itemValue)} selectedValue={value} style={{
+            height: 44,
+            width: '100%',
+            backgroundColor: 'transparent',
+            color: theme.colors.text,
+            borderWidth: 0,
+        }}>
+        {options.map((option) => (<Picker.Item key={option.value} enabled={!option.disabled} label={option.label} value={option.value}/>))}
+      </Picker>
+    </Box>);
+}
+//# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,UAAU,MAAM,CAAiC,EACrD,KAAK,EACL,OAAO,EACP,aAAa,EACb,QAAQ,EACR,OAAO,EACP,MAAM,GACc;IACpB,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE7B,OAAO,CACL,CAAC,GAAG,CACF,EAAE,CAAC,SAAS,CACZ,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAChE,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5B,MAAM,CAAC,GAAG,CACV,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CACvD,aAAa,CAAC,CAAC,KAAK,CAAC,CACrB,KAAK,CAAC,CAAC;YACL,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,MAAM;YACb,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;YACxB,WAAW,EAAE,CAAC;SACf,CAAC,CAEF;QAAA,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,CAAC,MAAM,CAAC,IAAI,CACV,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAClB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAC1B,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACpB,CACH,CAAC,CACJ;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './Select';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/dist/components/select/index.js

@@ -0,0 +1,3 @@
+export * from './Select';
+export * from './types';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/dist/components/select/types.d.ts

@@ -0,0 +1,14 @@
+export interface SelectOption<TValue extends string = string> {
+    value: TValue;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps<TValue extends string = string> {
+    value: TValue;
+    options: readonly SelectOption<TValue>[];
+    onValueChange: (value: TValue) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/select/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/select/types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/select/types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TabsProps } from './types';
+export declare function Tabs<TValue extends string = string>({ value, items, onValueChange, variant, size, disabled: tabsDisabled, testID, }: TabsProps<TValue>): React.JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAW,SAAS,EAAE,MAAM,SAAS,CAAC;AAElD,wBAAgB,IAAI,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAAE,EACnD,KAAK,EACL,KAAK,EACL,aAAa,EACb,OAAqB,EACrB,IAAU,EACV,QAAQ,EAAE,YAAY,EACtB,MAAM,GACP,EAAE,SAAS,CAAC,MAAM,CAAC,qBAwFnB"}

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,37 @@
+import { Box, Stack, Text, useTheme } from '@ankhorage/surface';
+import React from 'react';
+import { Button } from '../button';
+export function Tabs({ value, items, onValueChange, variant = 'underline', size = 'm', disabled: tabsDisabled, testID, }) {
+    const { theme } = useTheme();
+    const renderTab = (item) => {
+        const isActive = item.value === value;
+        const isDisabled = tabsDisabled ?? item.disabled;
+        if (variant === 'segmented') {
+            return (<Button key={item.value} emphasis={isActive ? 'solid' : 'ghost'} tone="neutral" size={size} disabled={isDisabled} onPress={() => onValueChange(item.value)} leadingIcon={item.icon} testID={item.testID}>
+          {item.label}
+          {item.badge}
+        </Button>);
+        }
+        if (variant === 'pill') {
+            return (<Button key={item.value} emphasis={isActive ? 'soft' : 'ghost'} tone={isActive ? 'primary' : 'neutral'} size={size} disabled={isDisabled} onPress={() => onValueChange(item.value)} leadingIcon={item.icon} testID={item.testID}>
+          {item.label}
+          {item.badge}
+        </Button>);
+        }
+        // Default: 'underline'
+        return (<Box key={item.value} borderColor={isActive ? theme.colors.primary : 'transparent'} pb="xs" style={{
+                borderBottomWidth: 2,
+            }}>
+        <Button emphasis="ghost" tone="neutral" size={size} disabled={isDisabled} onPress={() => onValueChange(item.value)} leadingIcon={item.icon} testID={item.testID}>
+          <Text color={isActive ? theme.colors.primary : undefined} tone={isActive ? undefined : 'muted'} weight={isActive ? 'semiBold' : 'regular'}>
+            {item.label}
+          </Text>
+          {item.badge}
+        </Button>
+      </Box>);
+    };
+    return (<Stack direction="row" gap={variant === 'segmented' ? 'none' : 'm'} align="center" testID={testID} p={variant === 'segmented' ? 'xxs' : 'none'} bg={variant === 'segmented' ? 'subtle' : 'transparent'} radius={variant === 'segmented' ? 'm' : 'none'}>
+      {items.map(renderTab)}
+    </Stack>);
+}
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export * from './Tabs';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}