@ankhorage/zora 0.3.10 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.4.0
+
+### Minor Changes
+
+- e6ea86b: Add RadioGroup and CheckboxGroup components built on Surface primitives.
+
 ## 0.3.10
 
 ### Patch Changes

package/README.md

@@ -238,6 +238,104 @@ Inherits all Surface `TextInputProps` except `leadingAccessory`, `size`, and
 
 </details>
 
+### `RadioGroup`
+
+Single-selection control built on top of Surface `Radio`, designed for use inside `FormField`.
+
+```tsx
+<FormField label="Navigator type">
+  <RadioGroup
+    value="tabs"
+    onValueChange={(value) => console.log(value)}
+    options={[
+      { value: 'tabs', label: 'Tabs' },
+      { value: 'drawer', label: 'Drawer' },
+    ]}
+  />
+</FormField>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop            | Type                         | Default      | Notes                          |
+| --------------- | ---------------------------- | ------------ | ------------------------------ |
+| `value`         | `string`                     | -            | Currently selected value.      |
+| `onValueChange` | `(value: string) => void`    | -            | Called when selection changes. |
+| `options`       | `RadioGroupOption[]`         | -            | List of selectable options.    |
+| `orientation`   | `'horizontal' \| 'vertical'` | `'vertical'` | Layout direction.              |
+| `gap`           | `'xs' \| 's' \| 'm' \| 'l'`  | `'s'`        | Spacing between items.         |
+
+Option shape:
+
+```ts
+type RadioGroupOption = {
+  value: string;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  disabled?: boolean;
+};
+```
+
+Inherited props:
+
+Passes `tone`, `size`, `invalid`, `readOnly`, `disabled`, and `testID`
+to underlying Surface `Radio` components.
+
+</details>
+
+---
+
+### `CheckboxGroup`
+
+Multi-selection control built on top of Surface `Checkbox`, for selecting multiple values.
+
+```tsx
+<FormField label="Features">
+  <CheckboxGroup
+    value={['a']}
+    onValueChange={(value) => console.log(value)}
+    options={[
+      { value: 'a', label: 'Feature A' },
+      { value: 'b', label: 'Feature B' },
+    ]}
+  />
+</FormField>
+```
+
+<details>
+<summary>Props</summary>
+
+ZORA props:
+
+| Prop            | Type                         | Default      | Notes                          |
+| --------------- | ---------------------------- | ------------ | ------------------------------ |
+| `value`         | `string[]`                   | -            | Array of selected values.      |
+| `onValueChange` | `(value: string[]) => void`  | -            | Called when selection changes. |
+| `options`       | `CheckboxGroupOption[]`      | -            | List of selectable options.    |
+| `orientation`   | `'horizontal' \| 'vertical'` | `'vertical'` | Layout direction.              |
+| `gap`           | `'xs' \| 's' \| 'm' \| 'l'`  | `'s'`        | Spacing between items.         |
+
+Option shape:
+
+```ts
+type CheckboxGroupOption = {
+  value: string;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  disabled?: boolean;
+};
+```
+
+Inherited props:
+
+Passes `tone`, `size`, `invalid`, `readOnly`, `disabled`, and `testID`
+to underlying Surface `Checkbox` components.
+
+</details>
+
 ### `Textarea`
 
 Multiline text input wrapper with ZORA sizing and optional Surface icon specs.

package/dist/components/checkbox/CheckboxGroup.d.ts

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

package/dist/components/checkbox/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAuB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEvE,wBAAgB,aAAa,CAAC,MAAM,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,aAAa,EACb,OAAO,EACP,WAAwB,EACxB,GAAS,EACT,IAAgB,EAChB,IAAU,EACV,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,MAAM,GACP,EAAE,kBAAkB,CAAC,MAAM,CAAC,qBAkC5B"}

package/dist/components/checkbox/CheckboxGroup.js

@@ -0,0 +1,31 @@
+import { Checkbox, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+import { View } from 'react-native';
+export function CheckboxGroup({ value, onValueChange, options, orientation = 'vertical', gap = 's', tone = 'primary', size = 'm', invalid = false, readOnly = false, disabled = false, testID, }) {
+    const selectedValues = new Set(value);
+    const isHorizontal = orientation === 'horizontal';
+    return (<View testID={testID} style={{
+            flexDirection: isHorizontal ? 'row' : 'column',
+            flexWrap: isHorizontal ? 'wrap' : 'nowrap',
+        }}>
+      <Stack direction={isHorizontal ? 'row' : 'column'} gap={gap} wrap={isHorizontal ? 'wrap' : 'nowrap'}>
+        {options.map((option) => (<CheckboxGroupItem key={option.value} option={option} checked={selectedValues.has(option.value)} disabled={disabled || option.disabled === true} invalid={invalid} readOnly={readOnly} size={size} tone={tone} value={value} onValueChange={onValueChange}/>))}
+      </Stack>
+    </View>);
+}
+function CheckboxGroupItem({ option, checked, disabled, invalid, readOnly, size, tone, value, onValueChange, }) {
+    return (<Checkbox checked={checked} disabled={disabled} invalid={invalid} readOnly={readOnly} size={size} tone={tone} testID={option.testID} onCheckedChange={(nextChecked) => {
+            const nextValue = nextChecked
+                ? [...value, option.value]
+                : value.filter((currentValue) => currentValue !== option.value);
+            onValueChange(nextValue);
+        }}>
+      <Stack gap="xs">
+        <Text>{option.label}</Text>
+        {option.description ? (<Text variant="caption" tone="muted">
+            {option.description}
+          </Text>) : null}
+      </Stack>
+    </Checkbox>);
+}
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/checkbox/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Checkbox, Stack, Text } from '@ankhorage/surface';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport type { CheckboxGroupOption, CheckboxGroupProps } from './types';\n\nexport function CheckboxGroup<TValue extends string>({\n  value,\n  onValueChange,\n  options,\n  orientation = 'vertical',\n  gap = 's',\n  tone = 'primary',\n  size = 'm',\n  invalid = false,\n  readOnly = false,\n  disabled = false,\n  testID,\n}: CheckboxGroupProps<TValue>) {\n  const selectedValues = new Set(value);\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <View\n      testID={testID}\n      style={{\n        flexDirection: isHorizontal ? 'row' : 'column',\n        flexWrap: isHorizontal ? 'wrap' : 'nowrap',\n      }}\n    >\n      <Stack\n        direction={isHorizontal ? 'row' : 'column'}\n        gap={gap}\n        wrap={isHorizontal ? 'wrap' : 'nowrap'}\n      >\n        {options.map((option) => (\n          <CheckboxGroupItem\n            key={option.value}\n            option={option}\n            checked={selectedValues.has(option.value)}\n            disabled={disabled || option.disabled === true}\n            invalid={invalid}\n            readOnly={readOnly}\n            size={size}\n            tone={tone}\n            value={value}\n            onValueChange={onValueChange}\n          />\n        ))}\n      </Stack>\n    </View>\n  );\n}\n\nfunction CheckboxGroupItem<TValue extends string>({\n  option,\n  checked,\n  disabled,\n  invalid,\n  readOnly,\n  size,\n  tone,\n  value,\n  onValueChange,\n}: {\n  option: CheckboxGroupOption<TValue>;\n  checked: boolean;\n  disabled: boolean;\n  invalid: boolean;\n  readOnly: boolean;\n  size: NonNullable<CheckboxGroupProps<TValue>['size']>;\n  tone: NonNullable<CheckboxGroupProps<TValue>['tone']>;\n  value: readonly TValue[];\n  onValueChange: (value: TValue[]) => void;\n}) {\n  return (\n    <Checkbox\n      checked={checked}\n      disabled={disabled}\n      invalid={invalid}\n      readOnly={readOnly}\n      size={size}\n      tone={tone}\n      testID={option.testID}\n      onCheckedChange={(nextChecked) => {\n        const nextValue = nextChecked\n          ? [...value, option.value]\n          : value.filter((currentValue) => currentValue !== option.value);\n\n        onValueChange(nextValue);\n      }}\n    >\n      <Stack gap=\"xs\">\n        <Text>{option.label}</Text>\n        {option.description ? (\n          <Text variant=\"caption\" tone=\"muted\">\n            {option.description}\n          </Text>\n        ) : null}\n      </Stack>\n    </Checkbox>\n  );\n}\n"]}

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

@@ -0,0 +1,5 @@
+export { CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupOption, CheckboxGroupProps } from './types';
+export type { CheckboxProps } from '@ankhorage/surface';
+export { Checkbox } from '@ankhorage/surface';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACvE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/checkbox/index.js

@@ -0,0 +1,3 @@
+export { CheckboxGroup } from './CheckboxGroup';
+export { Checkbox } from '@ankhorage/surface';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { CheckboxGroup } from './CheckboxGroup';\nexport type { CheckboxGroupOption, CheckboxGroupProps } from './types';\nexport type { CheckboxProps } from '@ankhorage/surface';\nexport { Checkbox } from '@ankhorage/surface';\n"]}

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

@@ -0,0 +1,17 @@
+import type { CheckboxProps } from '@ankhorage/surface';
+import type React from 'react';
+export interface CheckboxGroupOption<TValue extends string> {
+    value: TValue;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    testID?: string;
+}
+export interface CheckboxGroupProps<TValue extends string> extends Pick<CheckboxProps, 'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled' | 'testID'> {
+    value: readonly TValue[];
+    onValueChange: (value: TValue[]) => void;
+    options: readonly CheckboxGroupOption<TValue>[];
+    orientation?: 'horizontal' | 'vertical';
+    gap?: 'xs' | 's' | 'm' | 'l';
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,MAAM;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB,CAAC,MAAM,SAAS,MAAM,CAAE,SAAQ,IAAI,CACrE,aAAa,EACb,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CACjE;IACC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,SAAS,mBAAmB,CAAC,MAAM,CAAC,EAAE,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC9B"}

package/dist/components/checkbox/types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/checkbox/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nexport interface CheckboxGroupOption<TValue extends string> {\n  value: TValue;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  testID?: string;\n}\n\nexport interface CheckboxGroupProps<TValue extends string> extends Pick<\n  CheckboxProps,\n  'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled' | 'testID'\n> {\n  value: readonly TValue[];\n  onValueChange: (value: TValue[]) => void;\n  options: readonly CheckboxGroupOption<TValue>[];\n  orientation?: 'horizontal' | 'vertical';\n  gap?: 'xs' | 's' | 'm' | 'l';\n}\n"]}

package/dist/components/radio/RadioGroup.d.ts

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

package/dist/components/radio/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,SAAS,CAAC;AAEjE,wBAAgB,UAAU,CAAC,MAAM,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,aAAa,EACb,OAAO,EACP,WAAwB,EACxB,GAAS,EACT,IAAgB,EAChB,IAAU,EACV,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,MAAM,GACP,EAAE,eAAe,CAAC,MAAM,CAAC,qBAiCzB"}

package/dist/components/radio/RadioGroup.js

@@ -0,0 +1,28 @@
+import { Radio, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+import { View } from 'react-native';
+export function RadioGroup({ value, onValueChange, options, orientation = 'vertical', gap = 's', tone = 'primary', size = 'm', invalid = false, readOnly = false, disabled = false, testID, }) {
+    const isHorizontal = orientation === 'horizontal';
+    return (<View testID={testID} accessibilityRole="radiogroup" style={{
+            flexDirection: isHorizontal ? 'row' : 'column',
+            flexWrap: isHorizontal ? 'wrap' : 'nowrap',
+        }}>
+      <Stack direction={isHorizontal ? 'row' : 'column'} gap={gap} wrap={isHorizontal ? 'wrap' : 'nowrap'}>
+        {options.map((option) => (<RadioGroupItem key={option.value} option={option} checked={value === option.value} disabled={disabled || option.disabled === true} invalid={invalid} readOnly={readOnly} size={size} tone={tone} onSelect={onValueChange}/>))}
+      </Stack>
+    </View>);
+}
+function RadioGroupItem({ option, checked, disabled, invalid, readOnly, size, tone, onSelect, }) {
+    return (<Radio checked={checked} disabled={disabled} invalid={invalid} readOnly={readOnly} size={size} tone={tone} testID={option.testID} onCheckedChange={(nextChecked) => {
+            if (nextChecked)
+                onSelect(option.value);
+        }}>
+      <Stack gap="xs">
+        <Text>{option.label}</Text>
+        {option.description ? (<Text variant="caption" tone="muted">
+            {option.description}
+          </Text>) : null}
+      </Stack>
+    </Radio>);
+}
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/radio/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Radio, Stack, Text } from '@ankhorage/surface';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport type { RadioGroupOption, RadioGroupProps } from './types';\n\nexport function RadioGroup<TValue extends string>({\n  value,\n  onValueChange,\n  options,\n  orientation = 'vertical',\n  gap = 's',\n  tone = 'primary',\n  size = 'm',\n  invalid = false,\n  readOnly = false,\n  disabled = false,\n  testID,\n}: RadioGroupProps<TValue>) {\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <View\n      testID={testID}\n      accessibilityRole=\"radiogroup\"\n      style={{\n        flexDirection: isHorizontal ? 'row' : 'column',\n        flexWrap: isHorizontal ? 'wrap' : 'nowrap',\n      }}\n    >\n      <Stack\n        direction={isHorizontal ? 'row' : 'column'}\n        gap={gap}\n        wrap={isHorizontal ? 'wrap' : 'nowrap'}\n      >\n        {options.map((option) => (\n          <RadioGroupItem\n            key={option.value}\n            option={option}\n            checked={value === option.value}\n            disabled={disabled || option.disabled === true}\n            invalid={invalid}\n            readOnly={readOnly}\n            size={size}\n            tone={tone}\n            onSelect={onValueChange}\n          />\n        ))}\n      </Stack>\n    </View>\n  );\n}\n\nfunction RadioGroupItem<TValue extends string>({\n  option,\n  checked,\n  disabled,\n  invalid,\n  readOnly,\n  size,\n  tone,\n  onSelect,\n}: {\n  option: RadioGroupOption<TValue>;\n  checked: boolean;\n  disabled: boolean;\n  invalid: boolean;\n  readOnly: boolean;\n  size: NonNullable<RadioGroupProps<TValue>['size']>;\n  tone: NonNullable<RadioGroupProps<TValue>['tone']>;\n  onSelect: (value: TValue) => void;\n}) {\n  return (\n    <Radio\n      checked={checked}\n      disabled={disabled}\n      invalid={invalid}\n      readOnly={readOnly}\n      size={size}\n      tone={tone}\n      testID={option.testID}\n      onCheckedChange={(nextChecked) => {\n        if (nextChecked) onSelect(option.value);\n      }}\n    >\n      <Stack gap=\"xs\">\n        <Text>{option.label}</Text>\n        {option.description ? (\n          <Text variant=\"caption\" tone=\"muted\">\n            {option.description}\n          </Text>\n        ) : null}\n      </Stack>\n    </Radio>\n  );\n}\n"]}

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

@@ -0,0 +1,5 @@
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupOption, RadioGroupProps } from './types';
+export type { RadioProps } from '@ankhorage/surface';
+export { Radio } from '@ankhorage/surface';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AACjE,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/radio/index.js

@@ -0,0 +1,3 @@
+export { RadioGroup } from './RadioGroup';
+export { Radio } from '@ankhorage/surface';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { RadioGroup } from './RadioGroup';\nexport type { RadioGroupOption, RadioGroupProps } from './types';\nexport type { RadioProps } from '@ankhorage/surface';\nexport { Radio } from '@ankhorage/surface';\n"]}

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

@@ -0,0 +1,17 @@
+import type { RadioProps } from '@ankhorage/surface';
+import type React from 'react';
+export interface RadioGroupOption<TValue extends string> {
+    value: TValue;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    testID?: string;
+}
+export interface RadioGroupProps<TValue extends string> extends Pick<RadioProps, 'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled' | 'testID'> {
+    value: TValue;
+    onValueChange: (value: TValue) => void;
+    options: readonly RadioGroupOption<TValue>[];
+    orientation?: 'horizontal' | 'vertical';
+    gap?: 'xs' | 's' | 'm' | 'l';
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/radio/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gBAAgB,CAAC,MAAM,SAAS,MAAM;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe,CAAC,MAAM,SAAS,MAAM,CAAE,SAAQ,IAAI,CAClE,UAAU,EACV,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CACjE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,SAAS,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAC;IAC7C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,GAAG,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC9B"}

package/dist/components/radio/types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/radio/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { RadioProps } from '@ankhorage/surface';\nimport type React from 'react';\n\nexport interface RadioGroupOption<TValue extends string> {\n  value: TValue;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  testID?: string;\n}\n\nexport interface RadioGroupProps<TValue extends string> extends Pick<\n  RadioProps,\n  'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled' | 'testID'\n> {\n  value: TValue;\n  onValueChange: (value: TValue) => void;\n  options: readonly RadioGroupOption<TValue>[];\n  orientation?: 'horizontal' | 'vertical';\n  gap?: 'xs' | 's' | 'm' | 'l';\n}\n"]}

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export type { ButtonProps } from './components/button';
 export { Button } from './components/button';
 export type { CardProps } from './components/card';
 export { Card } from './components/card';
+export type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './components/checkbox';
+export { Checkbox, CheckboxGroup } from './components/checkbox';
 export type { DrawerProps } from './components/drawer';
 export { Drawer } from './components/drawer';
 export type { IconProps } from './components/icon';
@@ -14,6 +16,8 @@ export type { InputProps } from './components/input';
 export { Input } from './components/input';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';
+export type { RadioGroupOption, RadioGroupProps, RadioProps } from './components/radio';
+export { Radio, RadioGroup } from './components/radio';
 export type { SelectOption, SelectProps } from './components/select';
 export { Select } from './components/select';
 export type { TabItem, TabsProps } from './components/tabs';

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":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACpG,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,YAAY,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,YAAY,EACV,qBAAqB,EACrB,+BAA+B,GAChC,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,YAAY,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1,11 +1,13 @@
 export { Badge } from './components/badge';
 export { Button } from './components/button';
 export { Card } from './components/card';
+export { Checkbox, CheckboxGroup } from './components/checkbox';
 export { Drawer } from './components/drawer';
 export { Icon } from './components/icon';
 export { IconButton } from './components/icon-button';
 export { Input } from './components/input';
 export { Modal } from './components/modal';
+export { Radio, RadioGroup } from './components/radio';
 export { Select } from './components/select';
 export { Tabs } from './components/tabs';
 export { Textarea } from './components/textarea';

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,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,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,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAKtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,SAAS,CAAC","sourcesContent":["export type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type { IconProps } from './components/icon';\nexport { Icon } from './components/icon';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { InputProps } from './components/input';\nexport { Input } from './components/input';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type { SelectOption, SelectProps } from './components/select';\nexport { Select } from './components/select';\nexport type { TabItem, TabsProps } from './components/tabs';\nexport { Tabs } from './components/tabs';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToolbarActionProps, ToolbarProps } from './components/toolbar';\nexport { Toolbar, ToolbarAction } from './components/toolbar';\nexport type { AppShellProps } from './layout/app-shell';\nexport { AppShell } from './layout/app-shell';\nexport type { AuthLayoutProps } from './layout/auth-layout';\nexport { AuthLayout } from './layout/auth-layout';\nexport type { PageProps } from './layout/page';\nexport { Page } from './layout/page';\nexport type { PageHeaderProps } from './layout/page-header';\nexport { PageHeader } from './layout/page-header';\nexport type { PageSectionProps } from './layout/page-section';\nexport { PageSection } from './layout/page-section';\nexport type { SettingsLayoutProps } from './layout/settings-layout';\nexport { SettingsLayout } from './layout/settings-layout';\nexport type { SidebarLayoutProps } from './layout/sidebar-layout';\nexport { SidebarLayout } from './layout/sidebar-layout';\nexport type { TopbarLayoutProps } from './layout/topbar-layout';\nexport { TopbarLayout } from './layout/topbar-layout';\nexport type {\n  CollectionEditorProps,\n  CollectionEditorRenderItemProps,\n} from './patterns/collection-editor';\nexport { CollectionEditor } from './patterns/collection-editor';\nexport type { ConfirmDialogProps } from './patterns/confirm-dialog';\nexport { ConfirmDialog } from './patterns/confirm-dialog';\nexport type { DisclosureSectionProps } from './patterns/disclosure-section';\nexport { DisclosureSection } from './patterns/disclosure-section';\nexport type { EmptyStateAction, EmptyStateProps } from './patterns/empty-state';\nexport { EmptyState } from './patterns/empty-state';\nexport type { FormFieldProps } from './patterns/form-field';\nexport { FormField } from './patterns/form-field';\nexport type { InspectorFieldProps } from './patterns/inspector-field';\nexport { InspectorField } from './patterns/inspector-field';\nexport type { NoticeProps } from './patterns/notice';\nexport { Notice } from './patterns/notice';\nexport type { PanelProps } from './patterns/panel';\nexport { Panel } from './patterns/panel';\nexport type { ResponsivePanelProps } from './patterns/responsive-panel';\nexport { ResponsivePanel } from './patterns/responsive-panel';\nexport type { SectionHeaderProps } from './patterns/section-header';\nexport { SectionHeader } from './patterns/section-header';\nexport type { SettingsRowProps } from './patterns/settings-row';\nexport { SettingsRow } from './patterns/settings-row';\nexport type { SwitchFieldProps } from './patterns/switch-field';\nexport { SwitchField } from './patterns/switch-field';\nexport type { PaletteItemProps, TileGridProps } from './patterns/tile-grid';\nexport { PaletteItem, TileGrid } from './patterns/tile-grid';\nexport type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';\nexport { TreeItem, TreeView } from './patterns/tree-view';\nexport * from './theme';\n"]}
+{"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,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEvD,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,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAKtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,SAAS,CAAC","sourcesContent":["export type { BadgeProps } from './components/badge';\nexport { Badge } from './components/badge';\nexport type { ButtonProps } from './components/button';\nexport { Button } from './components/button';\nexport type { CardProps } from './components/card';\nexport { Card } from './components/card';\nexport type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './components/checkbox';\nexport { Checkbox, CheckboxGroup } from './components/checkbox';\nexport type { DrawerProps } from './components/drawer';\nexport { Drawer } from './components/drawer';\nexport type { IconProps } from './components/icon';\nexport { Icon } from './components/icon';\nexport type { IconButtonProps } from './components/icon-button';\nexport { IconButton } from './components/icon-button';\nexport type { InputProps } from './components/input';\nexport { Input } from './components/input';\nexport type { ModalProps } from './components/modal';\nexport { Modal } from './components/modal';\nexport type { RadioGroupOption, RadioGroupProps, RadioProps } from './components/radio';\nexport { Radio, RadioGroup } from './components/radio';\nexport type { SelectOption, SelectProps } from './components/select';\nexport { Select } from './components/select';\nexport type { TabItem, TabsProps } from './components/tabs';\nexport { Tabs } from './components/tabs';\nexport type { TextareaProps } from './components/textarea';\nexport { Textarea } from './components/textarea';\nexport type { ToolbarActionProps, ToolbarProps } from './components/toolbar';\nexport { Toolbar, ToolbarAction } from './components/toolbar';\nexport type { AppShellProps } from './layout/app-shell';\nexport { AppShell } from './layout/app-shell';\nexport type { AuthLayoutProps } from './layout/auth-layout';\nexport { AuthLayout } from './layout/auth-layout';\nexport type { PageProps } from './layout/page';\nexport { Page } from './layout/page';\nexport type { PageHeaderProps } from './layout/page-header';\nexport { PageHeader } from './layout/page-header';\nexport type { PageSectionProps } from './layout/page-section';\nexport { PageSection } from './layout/page-section';\nexport type { SettingsLayoutProps } from './layout/settings-layout';\nexport { SettingsLayout } from './layout/settings-layout';\nexport type { SidebarLayoutProps } from './layout/sidebar-layout';\nexport { SidebarLayout } from './layout/sidebar-layout';\nexport type { TopbarLayoutProps } from './layout/topbar-layout';\nexport { TopbarLayout } from './layout/topbar-layout';\nexport type {\n  CollectionEditorProps,\n  CollectionEditorRenderItemProps,\n} from './patterns/collection-editor';\nexport { CollectionEditor } from './patterns/collection-editor';\nexport type { ConfirmDialogProps } from './patterns/confirm-dialog';\nexport { ConfirmDialog } from './patterns/confirm-dialog';\nexport type { DisclosureSectionProps } from './patterns/disclosure-section';\nexport { DisclosureSection } from './patterns/disclosure-section';\nexport type { EmptyStateAction, EmptyStateProps } from './patterns/empty-state';\nexport { EmptyState } from './patterns/empty-state';\nexport type { FormFieldProps } from './patterns/form-field';\nexport { FormField } from './patterns/form-field';\nexport type { InspectorFieldProps } from './patterns/inspector-field';\nexport { InspectorField } from './patterns/inspector-field';\nexport type { NoticeProps } from './patterns/notice';\nexport { Notice } from './patterns/notice';\nexport type { PanelProps } from './patterns/panel';\nexport { Panel } from './patterns/panel';\nexport type { ResponsivePanelProps } from './patterns/responsive-panel';\nexport { ResponsivePanel } from './patterns/responsive-panel';\nexport type { SectionHeaderProps } from './patterns/section-header';\nexport { SectionHeader } from './patterns/section-header';\nexport type { SettingsRowProps } from './patterns/settings-row';\nexport { SettingsRow } from './patterns/settings-row';\nexport type { SwitchFieldProps } from './patterns/switch-field';\nexport { SwitchField } from './patterns/switch-field';\nexport type { PaletteItemProps, TileGridProps } from './patterns/tile-grid';\nexport { PaletteItem, TileGrid } from './patterns/tile-grid';\nexport type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';\nexport { TreeItem, TreeView } from './patterns/tree-view';\nexport * from './theme';\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "0.3.10",
+  "version": "0.4.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/components/checkbox/CheckboxGroup.tsx

@@ -0,0 +1,103 @@
+import { Checkbox, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+import { View } from 'react-native';
+
+import type { CheckboxGroupOption, CheckboxGroupProps } from './types';
+
+export function CheckboxGroup<TValue extends string>({
+  value,
+  onValueChange,
+  options,
+  orientation = 'vertical',
+  gap = 's',
+  tone = 'primary',
+  size = 'm',
+  invalid = false,
+  readOnly = false,
+  disabled = false,
+  testID,
+}: CheckboxGroupProps<TValue>) {
+  const selectedValues = new Set(value);
+  const isHorizontal = orientation === 'horizontal';
+
+  return (
+    <View
+      testID={testID}
+      style={{
+        flexDirection: isHorizontal ? 'row' : 'column',
+        flexWrap: isHorizontal ? 'wrap' : 'nowrap',
+      }}
+    >
+      <Stack
+        direction={isHorizontal ? 'row' : 'column'}
+        gap={gap}
+        wrap={isHorizontal ? 'wrap' : 'nowrap'}
+      >
+        {options.map((option) => (
+          <CheckboxGroupItem
+            key={option.value}
+            option={option}
+            checked={selectedValues.has(option.value)}
+            disabled={disabled || option.disabled === true}
+            invalid={invalid}
+            readOnly={readOnly}
+            size={size}
+            tone={tone}
+            value={value}
+            onValueChange={onValueChange}
+          />
+        ))}
+      </Stack>
+    </View>
+  );
+}
+
+function CheckboxGroupItem<TValue extends string>({
+  option,
+  checked,
+  disabled,
+  invalid,
+  readOnly,
+  size,
+  tone,
+  value,
+  onValueChange,
+}: {
+  option: CheckboxGroupOption<TValue>;
+  checked: boolean;
+  disabled: boolean;
+  invalid: boolean;
+  readOnly: boolean;
+  size: NonNullable<CheckboxGroupProps<TValue>['size']>;
+  tone: NonNullable<CheckboxGroupProps<TValue>['tone']>;
+  value: readonly TValue[];
+  onValueChange: (value: TValue[]) => void;
+}) {
+  return (
+    <Checkbox
+      checked={checked}
+      disabled={disabled}
+      invalid={invalid}
+      readOnly={readOnly}
+      size={size}
+      tone={tone}
+      testID={option.testID}
+      onCheckedChange={(nextChecked) => {
+        const nextValue = nextChecked
+          ? [...value, option.value]
+          : value.filter((currentValue) => currentValue !== option.value);
+
+        onValueChange(nextValue);
+      }}
+    >
+      <Stack gap="xs">
+        <Text>{option.label}</Text>
+        {option.description ? (
+          <Text variant="caption" tone="muted">
+            {option.description}
+          </Text>
+        ) : null}
+      </Stack>
+    </Checkbox>
+  );
+}

package/src/components/checkbox/index.ts

@@ -0,0 +1,4 @@
+export { CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupOption, CheckboxGroupProps } from './types';
+export type { CheckboxProps } from '@ankhorage/surface';
+export { Checkbox } from '@ankhorage/surface';

package/src/components/checkbox/types.ts

@@ -0,0 +1,21 @@
+import type { CheckboxProps } from '@ankhorage/surface';
+import type React from 'react';
+
+export interface CheckboxGroupOption<TValue extends string> {
+  value: TValue;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  disabled?: boolean;
+  testID?: string;
+}
+
+export interface CheckboxGroupProps<TValue extends string> extends Pick<
+  CheckboxProps,
+  'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled' | 'testID'
+> {
+  value: readonly TValue[];
+  onValueChange: (value: TValue[]) => void;
+  options: readonly CheckboxGroupOption<TValue>[];
+  orientation?: 'horizontal' | 'vertical';
+  gap?: 'xs' | 's' | 'm' | 'l';
+}

package/src/components/radio/RadioGroup.tsx

@@ -0,0 +1,96 @@
+import { Radio, Stack, Text } from '@ankhorage/surface';
+import React from 'react';
+import { View } from 'react-native';
+
+import type { RadioGroupOption, RadioGroupProps } from './types';
+
+export function RadioGroup<TValue extends string>({
+  value,
+  onValueChange,
+  options,
+  orientation = 'vertical',
+  gap = 's',
+  tone = 'primary',
+  size = 'm',
+  invalid = false,
+  readOnly = false,
+  disabled = false,
+  testID,
+}: RadioGroupProps<TValue>) {
+  const isHorizontal = orientation === 'horizontal';
+
+  return (
+    <View
+      testID={testID}
+      accessibilityRole="radiogroup"
+      style={{
+        flexDirection: isHorizontal ? 'row' : 'column',
+        flexWrap: isHorizontal ? 'wrap' : 'nowrap',
+      }}
+    >
+      <Stack
+        direction={isHorizontal ? 'row' : 'column'}
+        gap={gap}
+        wrap={isHorizontal ? 'wrap' : 'nowrap'}
+      >
+        {options.map((option) => (
+          <RadioGroupItem
+            key={option.value}
+            option={option}
+            checked={value === option.value}
+            disabled={disabled || option.disabled === true}
+            invalid={invalid}
+            readOnly={readOnly}
+            size={size}
+            tone={tone}
+            onSelect={onValueChange}
+          />
+        ))}
+      </Stack>
+    </View>
+  );
+}
+
+function RadioGroupItem<TValue extends string>({
+  option,
+  checked,
+  disabled,
+  invalid,
+  readOnly,
+  size,
+  tone,
+  onSelect,
+}: {
+  option: RadioGroupOption<TValue>;
+  checked: boolean;
+  disabled: boolean;
+  invalid: boolean;
+  readOnly: boolean;
+  size: NonNullable<RadioGroupProps<TValue>['size']>;
+  tone: NonNullable<RadioGroupProps<TValue>['tone']>;
+  onSelect: (value: TValue) => void;
+}) {
+  return (
+    <Radio
+      checked={checked}
+      disabled={disabled}
+      invalid={invalid}
+      readOnly={readOnly}
+      size={size}
+      tone={tone}
+      testID={option.testID}
+      onCheckedChange={(nextChecked) => {
+        if (nextChecked) onSelect(option.value);
+      }}
+    >
+      <Stack gap="xs">
+        <Text>{option.label}</Text>
+        {option.description ? (
+          <Text variant="caption" tone="muted">
+            {option.description}
+          </Text>
+        ) : null}
+      </Stack>
+    </Radio>
+  );
+}

package/src/components/radio/index.ts

@@ -0,0 +1,4 @@
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupOption, RadioGroupProps } from './types';
+export type { RadioProps } from '@ankhorage/surface';
+export { Radio } from '@ankhorage/surface';

package/src/components/radio/types.ts

@@ -0,0 +1,21 @@
+import type { RadioProps } from '@ankhorage/surface';
+import type React from 'react';
+
+export interface RadioGroupOption<TValue extends string> {
+  value: TValue;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  disabled?: boolean;
+  testID?: string;
+}
+
+export interface RadioGroupProps<TValue extends string> extends Pick<
+  RadioProps,
+  'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled' | 'testID'
+> {
+  value: TValue;
+  onValueChange: (value: TValue) => void;
+  options: readonly RadioGroupOption<TValue>[];
+  orientation?: 'horizontal' | 'vertical';
+  gap?: 'xs' | 's' | 'm' | 'l';
+}

package/src/index.ts

@@ -4,6 +4,8 @@ export type { ButtonProps } from './components/button';
 export { Button } from './components/button';
 export type { CardProps } from './components/card';
 export { Card } from './components/card';
+export type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './components/checkbox';
+export { Checkbox, CheckboxGroup } from './components/checkbox';
 export type { DrawerProps } from './components/drawer';
 export { Drawer } from './components/drawer';
 export type { IconProps } from './components/icon';
@@ -14,6 +16,8 @@ export type { InputProps } from './components/input';
 export { Input } from './components/input';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';
+export type { RadioGroupOption, RadioGroupProps, RadioProps } from './components/radio';
+export { Radio, RadioGroup } from './components/radio';
 export type { SelectOption, SelectProps } from './components/select';
 export { Select } from './components/select';
 export type { TabItem, TabsProps } from './components/tabs';