@ankhorage/zora 7.0.0 → 9.0.0

package/dist/features/form/checkbox/checkboxMeta.d.ts

@@ -0,0 +1,67 @@
+export declare const checkboxMeta: {
+    readonly name: "Checkbox";
+    readonly category: "component";
+    readonly directManifestNode: true;
+    readonly allowedChildren: readonly [];
+    readonly blueprint: {
+        readonly label: "Checkbox";
+        readonly defaultProps: {
+            readonly label: "Option";
+            readonly checked: false;
+        };
+    };
+    readonly props: {
+        readonly label: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Label";
+        };
+        readonly checked: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Checked";
+            readonly default: false;
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Disabled";
+            readonly default: false;
+        };
+    };
+};
+export declare const checkboxGroupMeta: {
+    readonly name: "CheckboxGroup";
+    readonly category: "component";
+    readonly directManifestNode: true;
+    readonly allowedChildren: readonly [];
+    readonly blueprint: {
+        readonly label: "Checkbox group";
+        readonly defaultProps: {
+            readonly value: readonly [];
+            readonly options: readonly [{
+                readonly value: "option-a";
+                readonly label: "First option";
+            }];
+        };
+    };
+    readonly props: {
+        readonly value: {
+            readonly type: "array";
+            readonly category: "State";
+            readonly label: "Value";
+        };
+        readonly options: {
+            readonly type: "array";
+            readonly category: "Content";
+            readonly label: "Options";
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Disabled";
+            readonly default: false;
+        };
+    };
+};
+//# sourceMappingURL=checkboxMeta.d.ts.map

package/dist/features/form/checkbox/checkboxMeta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxMeta.d.ts","sourceRoot":"","sources":["../../../../src/features/form/checkbox/checkboxMeta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWa,CAAC;AAEvC,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcQ,CAAC"}

package/dist/features/form/checkbox/checkboxMeta.js

@@ -0,0 +1,28 @@
+export const checkboxMeta = {
+    name: 'Checkbox',
+    category: 'component',
+    directManifestNode: true,
+    allowedChildren: [],
+    blueprint: { label: 'Checkbox', defaultProps: { label: 'Option', checked: false } },
+    props: {
+        label: { type: 'string', category: 'Content', label: 'Label' },
+        checked: { type: 'boolean', category: 'State', label: 'Checked', default: false },
+        disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+    },
+};
+export const checkboxGroupMeta = {
+    name: 'CheckboxGroup',
+    category: 'component',
+    directManifestNode: true,
+    allowedChildren: [],
+    blueprint: {
+        label: 'Checkbox group',
+        defaultProps: { value: [], options: [{ value: 'option-a', label: 'First option' }] },
+    },
+    props: {
+        value: { type: 'array', category: 'State', label: 'Value' },
+        options: { type: 'array', category: 'Content', label: 'Options' },
+        disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+    },
+};
+//# sourceMappingURL=checkboxMeta.js.map

package/dist/features/form/checkbox/checkboxMeta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxMeta.js","sourceRoot":"","sources":["../../../../src/features/form/checkbox/checkboxMeta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,EAAE;IACnB,SAAS,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;IACnF,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE;QACjF,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE;KACpF;CACmC,CAAC;AAEvC,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE,eAAe;IACrB,QAAQ,EAAE,WAAW;IACrB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,EAAE;IACnB,SAAS,EAAE;QACT,KAAK,EAAE,gBAAgB;QACvB,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE;KACrF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACjE,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE;KACpF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../../metadata';\n\nexport const checkboxMeta = {\n  name: 'Checkbox',\n  category: 'component',\n  directManifestNode: true,\n  allowedChildren: [],\n  blueprint: { label: 'Checkbox', defaultProps: { label: 'Option', checked: false } },\n  props: {\n    label: { type: 'string', category: 'Content', label: 'Label' },\n    checked: { type: 'boolean', category: 'State', label: 'Checked', default: false },\n    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },\n  },\n} as const satisfies ZoraComponentMeta;\n\nexport const checkboxGroupMeta = {\n  name: 'CheckboxGroup',\n  category: 'component',\n  directManifestNode: true,\n  allowedChildren: [],\n  blueprint: {\n    label: 'Checkbox group',\n    defaultProps: { value: [], options: [{ value: 'option-a', label: 'First option' }] },\n  },\n  props: {\n    value: { type: 'array', category: 'State', label: 'Value' },\n    options: { type: 'array', category: 'Content', label: 'Options' },\n    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/features/form/checkbox/public.d.ts

@@ -0,0 +1,4 @@
+export type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, } from '../../../types/checkbox';
+export { Checkbox } from './adapters/inbound/Checkbox';
+export { CheckboxGroup } from './adapters/inbound/CheckboxGroup';
+//# sourceMappingURL=public.d.ts.map

package/dist/features/form/checkbox/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../../src/features/form/checkbox/public.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,aAAa,GACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/features/form/checkbox/public.js

@@ -0,0 +1,3 @@
+export { Checkbox } from './adapters/inbound/Checkbox';
+export { CheckboxGroup } from './adapters/inbound/CheckboxGroup';
+//# sourceMappingURL=public.js.map

package/dist/features/form/checkbox/public.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../../src/features/form/checkbox/public.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC","sourcesContent":["export type {\n  CheckboxGroupOption,\n  CheckboxGroupProps,\n  CheckboxProps,\n} from '../../../types/checkbox';\nexport { Checkbox } from './adapters/inbound/Checkbox';\nexport { CheckboxGroup } from './adapters/inbound/CheckboxGroup';\n"]}

package/dist/features/form/radio/adapters/inbound/Radio.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { RadioProps } from '../../../../../types/radio';
+/***
+ * Single-choice selection control used within a radio group.
+ */
+export declare const Radio: (props: RadioProps) => React.ReactElement | null;
+//# sourceMappingURL=Radio.d.ts.map

package/dist/features/form/radio/adapters/inbound/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/Radio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAM7D;;GAEG;AACH,eAAO,MAAM,KAAK,kDAAiC,CAAC"}

package/dist/features/form/radio/adapters/inbound/Radio.js

@@ -0,0 +1,11 @@
+import { Radio as SurfaceRadio } from '@ankhorage/surface';
+import React from 'react';
+import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
+function RadioInner({ themeId: _themeId, mode: _mode, interactionPolicy, ...props }) {
+    return <SurfaceRadio {...props} interactionPolicy={interactionPolicy}/>;
+}
+/***
+ * Single-choice selection control used within a radio group.
+ */
+export const Radio = withZoraThemeScope(RadioInner);
+//# sourceMappingURL=Radio.js.map

package/dist/features/form/radio/adapters/inbound/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAG7E,SAAS,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAc;IAC7F,OAAO,CAAC,YAAY,CAAC,IAAI,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,EAAG,CAAC;AAC3E,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC","sourcesContent":["import { Radio as SurfaceRadio } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';\nimport type { RadioProps } from '../../../../../types/radio';\n\nfunction RadioInner({ themeId: _themeId, mode: _mode, interactionPolicy, ...props }: RadioProps) {\n  return <SurfaceRadio {...props} interactionPolicy={interactionPolicy} />;\n}\n\n/***\n * Single-choice selection control used within a radio group.\n */\nexport const Radio = withZoraThemeScope(RadioInner);\n"]}

package/dist/features/form/radio/adapters/inbound/RadioGroup.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RadioGroupProps } from '../../../../../types/radio';
+/*** Present one controlled single-choice group as inline radios or icon radio options. */
+export declare const RadioGroup: <TValue extends string>(props: RadioGroupProps<TValue>) => React.ReactElement | null;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/features/form/radio/adapters/inbound/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAMlE,0FAA0F;AAC1F,eAAO,MAAM,UAAU,GAGE,MAAM,SAAS,MAAM,8DAHe,CAAC"}

package/dist/features/form/radio/adapters/inbound/RadioGroup.js

@@ -0,0 +1,70 @@
+import { Radio } from '@ankhorage/surface';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useZoraThemeRecipe } from '../../../../../theme/useZoraThemeRecipe';
+import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
+import { Stack } from '../../../../layout/public';
+import { Text } from '../../../../typography/public';
+import { resolveRadioGroupThemeRecipe } from '../../utils/resolveRadioGroupThemeRecipe';
+import { RadioOptionControl } from './RadioOptionControl';
+/*** Present one controlled single-choice group as inline radios or icon radio options. */
+export const RadioGroup = withZoraThemeScope(RadioGroupInner);
+/*** Resolve shared presentation once and preserve a single interaction boundary per option. */
+function RadioGroupInner({ themeId: _themeId, mode: _mode, ...props }) {
+    const [localValue, setLocalValue] = React.useState(props.defaultValue);
+    const onValueChange = (next) => {
+        if (props.value === undefined)
+            setLocalValue(next);
+        props.onValueChange?.(next);
+    };
+    const selectedProps = { ...props, value: props.value ?? localValue, onValueChange };
+    const themeFields = useZoraThemeRecipe('RadioGroup');
+    const recipe = resolveRadioGroupThemeRecipe({ ...props, themeFields });
+    if (props.presentation !== 'card')
+        return <RadioGroupInline {...selectedProps} {...recipe}/>;
+    const columns = props.columns ?? (props.orientation === 'horizontal' ? Math.max(1, props.options.length) : 1);
+    const rows = Array.from({ length: Math.ceil(props.options.length / columns) }, (_, index) => props.options.slice(index * columns, (index + 1) * columns));
+    return (<View testID={props.testID} accessibilityRole="radiogroup">
+      <Stack gap={recipe.gap}>
+        {rows.map((options, index) => (<Stack key={index} direction="row" gap={recipe.gap}>
+            {options.map((option) => (<View key={option.value} style={styles.option}>
+                <RadioGroupItem {...selectedProps} {...recipe} option={option}/>
+              </View>))}
+            {Array.from({ length: columns - options.length }, (_, slot) => (<View key={`empty-${slot}`} style={styles.option}/>))}
+          </Stack>))}
+      </Stack>
+    </View>);
+}
+/*** Preserve ordinary radio wrapping independently of the icon-option grid. */
+function RadioGroupInline(props) {
+    return (<View testID={props.testID} accessibilityRole="radiogroup">
+      <Stack direction={props.orientation === 'horizontal' ? 'row' : 'column'} gap={props.gap} wrap="wrap">
+        {props.options.map((option) => (<RadioGroupItem key={option.value} {...props} option={option}/>))}
+      </Stack>
+    </View>);
+}
+/*** Delegate icon options to their composed radio boundary and ordinary options to Surface Radio. */
+function RadioGroupItem(props) {
+    const { option, value, onValueChange, interactionPolicy, color, size } = props;
+    const checked = value === option.value;
+    const inactive = props.disabled === true || option.disabled === true;
+    const readOnly = props.readOnly === true;
+    const invalid = props.invalid === true;
+    const onSelect = () => {
+        if (!inactive && !readOnly && interactionPolicy !== 'passive' && !checked)
+            onValueChange?.(option.value);
+    };
+    if (props.presentation === 'card') {
+        return (<RadioOptionControl {...props} checked={checked} disabled={inactive} readOnly={readOnly} invalid={invalid} layout={props.contentOrientation ?? 'horizontal'} onSelect={onSelect}/>);
+    }
+    return (<Radio checked={checked} disabled={inactive} readOnly={readOnly} invalid={invalid} interactionPolicy={interactionPolicy} color={color} size={size} testID={option.testID} onCheckedChange={onSelect}>
+      <Stack gap="xs">
+        <Text>{option.label}</Text>
+        {option.description ? (<Text emphasis="muted" variant="caption">
+            {option.description}
+          </Text>) : null}
+      </Stack>
+    </Radio>);
+}
+const styles = StyleSheet.create({ option: { flex: 1, minWidth: 0 } });
+//# sourceMappingURL=RadioGroup.js.map

package/dist/features/form/radio/adapters/inbound/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Radio } from '@ankhorage/surface';\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { useZoraThemeRecipe } from '../../../../../theme/useZoraThemeRecipe';\nimport { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';\nimport type { RadioGroupProps } from '../../../../../types/radio';\nimport { Stack } from '../../../../layout/public';\nimport { Text } from '../../../../typography/public';\nimport { resolveRadioGroupThemeRecipe } from '../../utils/resolveRadioGroupThemeRecipe';\nimport { RadioOptionControl } from './RadioOptionControl';\n\n/*** Present one controlled single-choice group as inline radios or icon radio options. */\nexport const RadioGroup = withZoraThemeScope(RadioGroupInner);\n\n/*** Resolve shared presentation once and preserve a single interaction boundary per option. */\nfunction RadioGroupInner<TValue extends string>({\n  themeId: _themeId,\n  mode: _mode,\n  ...props\n}: RadioGroupProps<TValue>) {\n  const [localValue, setLocalValue] = React.useState(props.defaultValue);\n  const onValueChange = (next: TValue) => {\n    if (props.value === undefined) setLocalValue(next);\n    props.onValueChange?.(next);\n  };\n  const selectedProps = { ...props, value: props.value ?? localValue, onValueChange };\n  const themeFields = useZoraThemeRecipe('RadioGroup');\n  const recipe = resolveRadioGroupThemeRecipe({ ...props, themeFields });\n  if (props.presentation !== 'card') return <RadioGroupInline {...selectedProps} {...recipe} />;\n  const columns =\n    props.columns ?? (props.orientation === 'horizontal' ? Math.max(1, props.options.length) : 1);\n  const rows = Array.from({ length: Math.ceil(props.options.length / columns) }, (_, index) =>\n    props.options.slice(index * columns, (index + 1) * columns),\n  );\n  return (\n    <View testID={props.testID} accessibilityRole=\"radiogroup\">\n      <Stack gap={recipe.gap}>\n        {rows.map((options, index) => (\n          <Stack key={index} direction=\"row\" gap={recipe.gap}>\n            {options.map((option) => (\n              <View key={option.value} style={styles.option}>\n                <RadioGroupItem {...selectedProps} {...recipe} option={option} />\n              </View>\n            ))}\n            {Array.from({ length: columns - options.length }, (_, slot) => (\n              <View key={`empty-${slot}`} style={styles.option} />\n            ))}\n          </Stack>\n        ))}\n      </Stack>\n    </View>\n  );\n}\n\n/*** Preserve ordinary radio wrapping independently of the icon-option grid. */\nfunction RadioGroupInline<TValue extends string>(props: RadioGroupProps<TValue>) {\n  return (\n    <View testID={props.testID} accessibilityRole=\"radiogroup\">\n      <Stack\n        direction={props.orientation === 'horizontal' ? 'row' : 'column'}\n        gap={props.gap}\n        wrap=\"wrap\"\n      >\n        {props.options.map((option) => (\n          <RadioGroupItem key={option.value} {...props} option={option} />\n        ))}\n      </Stack>\n    </View>\n  );\n}\n\n/*** Delegate icon options to their composed radio boundary and ordinary options to Surface Radio. */\nfunction RadioGroupItem<TValue extends string>(\n  props: RadioGroupProps<TValue> & {\n    option: RadioGroupProps<TValue>['options'][number];\n  },\n) {\n  const { option, value, onValueChange, interactionPolicy, color, size } = props;\n  const checked = value === option.value;\n  const inactive = props.disabled === true || option.disabled === true;\n  const readOnly = props.readOnly === true;\n  const invalid = props.invalid === true;\n  const onSelect = () => {\n    if (!inactive && !readOnly && interactionPolicy !== 'passive' && !checked)\n      onValueChange?.(option.value);\n  };\n  if (props.presentation === 'card') {\n    return (\n      <RadioOptionControl\n        {...props}\n        checked={checked}\n        disabled={inactive}\n        readOnly={readOnly}\n        invalid={invalid}\n        layout={props.contentOrientation ?? 'horizontal'}\n        onSelect={onSelect}\n      />\n    );\n  }\n  return (\n    <Radio\n      checked={checked}\n      disabled={inactive}\n      readOnly={readOnly}\n      invalid={invalid}\n      interactionPolicy={interactionPolicy}\n      color={color}\n      size={size}\n      testID={option.testID}\n      onCheckedChange={onSelect}\n    >\n      <Stack gap=\"xs\">\n        <Text>{option.label}</Text>\n        {option.description ? (\n          <Text emphasis=\"muted\" variant=\"caption\">\n            {option.description}\n          </Text>\n        ) : null}\n      </Stack>\n    </Radio>\n  );\n}\n\nconst styles = StyleSheet.create({ option: { flex: 1, minWidth: 0 } });\n"]}

package/dist/features/form/radio/adapters/inbound/RadioOptionControl.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { RadioGroupProps } from '../../../../../types/radio';
+/*** Render a selectable icon radio option with one accessible radio target and a trailing check. */
+export declare function RadioOptionControl<TValue extends string>(props: RadioOptionControlProps<TValue>): React.JSX.Element;
+interface RadioOptionControlProps<TValue extends string> extends Pick<RadioGroupProps<TValue>, 'color' | 'size' | 'interactionPolicy'> {
+    option: RadioGroupProps<TValue>['options'][number];
+    checked: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    invalid: boolean;
+    layout: 'horizontal' | 'vertical';
+    onSelect: () => void;
+}
+export {};
+//# sourceMappingURL=RadioOptionControl.d.ts.map

package/dist/features/form/radio/adapters/inbound/RadioOptionControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOptionControl.d.ts","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/RadioOptionControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AASlE,oGAAoG;AACpG,wBAAgB,kBAAkB,CAAC,MAAM,SAAS,MAAM,EAAE,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,qBAuC/F;AAqCD,UAAU,uBAAuB,CAAC,MAAM,SAAS,MAAM,CAAE,SAAQ,IAAI,CACnE,eAAe,CAAC,MAAM,CAAC,EACvB,OAAO,GAAG,MAAM,GAAG,mBAAmB,CACvC;IACC,MAAM,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACnD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,YAAY,GAAG,UAAU,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/features/form/radio/adapters/inbound/RadioOptionControl.js

@@ -0,0 +1,105 @@
+import { useTheme } from '@ankhorage/surface';
+import React from 'react';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
+import { Icon } from '../../../../icon/public';
+import { Text } from '../../../../typography/public';
+import { handleRadioOptionKeyDown, } from '../../utils/handleRadioOptionKeyDown';
+import { resolveRadioOptionColors } from '../../utils/resolveRadioOptionColors';
+/*** Render a selectable icon radio option with one accessible radio target and a trailing check. */
+export function RadioOptionControl(props) {
+    const { theme } = useTheme();
+    const { option, checked, disabled, readOnly, interactionPolicy, onSelect } = props;
+    const colors = resolveRadioOptionColors(theme, props);
+    const [focused, setFocused] = React.useState(false);
+    const keyboardProps = Platform.OS === 'web' && !readOnly && !disabled && interactionPolicy !== 'passive'
+        ? {
+            onKeyDown: (event) => handleRadioOptionKeyDown(event, onSelect),
+        }
+        : {};
+    const controlStyle = {
+        flex: 1,
+        width: '100%',
+        minHeight: props.size === 'l' ? 84 : 44,
+        borderWidth: checked || focused ? 2 : 1,
+        borderColor: focused ? theme.semantics.border.focus : checked ? colors.accent : colors.border,
+        borderRadius: theme.radii.l,
+        backgroundColor: colors.surface,
+    };
+    return (<Pressable {...keyboardProps} accessibilityRole="radio" accessibilityState={{ checked, disabled }} aria-checked={checked} aria-disabled={disabled} aria-readonly={readOnly} disabled={disabled} onPress={readOnly || interactionPolicy === 'passive' ? undefined : onSelect} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} testID={option.testID} style={controlStyle}>
+      {(state) => <RadioOptionControlBody {...props} pressed={state.pressed}/>}
+    </Pressable>);
+}
+/*** Arrange the icon, label and passive indicator within the native radio press target. */
+function RadioOptionControlBody(props) {
+    const { theme } = useTheme();
+    const colors = resolveRadioOptionColors(theme, props);
+    const contentStyle = {
+        padding: props.size === 's' ? theme.spacing.s : props.size === 'm' ? 12 : theme.spacing.m,
+        gap: props.layout === 'vertical' || !props.option.iconSource ? theme.spacing.s : theme.spacing.m,
+        ...(!props.option.iconSource ? { flexDirection: 'row-reverse' } : {}),
+        opacity: props.disabled ? 0.5 : props.pressed ? 0.7 : 1,
+    };
+    return (<View style={[
+            styles.content,
+            props.layout === 'vertical' ? styles.vertical : styles.horizontal,
+            contentStyle,
+        ]}>
+      <RadioOptionControlContent {...props}/>
+      {props.option.iconSource || props.checked ? (<View style={props.layout === 'vertical' ? styles.corner : undefined}>
+          <RadioOptionControlIndicator checked={props.checked} accent={colors.accent} onAccent={colors.onAccent}/>
+        </View>) : null}
+    </View>);
+}
+/*** Keep decoration passive while allowing labels to wrap at narrow widths and large text sizes. */
+function RadioOptionControlContent({ option, layout, size, color, invalid, disabled, }) {
+    const { theme } = useTheme();
+    const colors = resolveRadioOptionColors(theme, { color, invalid, disabled });
+    return (<>
+      {option.iconSource ? (<View accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+          <Icon source={option.iconSource} size={size === 'l' ? 36 : 28} color={colors.accent}/>
+        </View>) : null}
+      <View style={layout === 'horizontal' ? styles.label : styles.centerLabel}>
+        <Text variant={size === 'l' ? 'body' : 'bodySmall'} weight="semiBold" align={layout === 'vertical' || !option.iconSource ? 'center' : 'left'}>
+          {option.label}
+        </Text>
+        {option.description ? (<Text emphasis="muted" variant="bodySmall" align={layout === 'vertical' || !option.iconSource ? 'center' : 'left'}>
+            {option.description}
+          </Text>) : null}
+      </View>
+    </>);
+}
+/*** Draw a passive check using themed geometry without requiring an application media asset. */
+function RadioOptionControlIndicator({ checked, accent, onAccent, }) {
+    const indicatorStyle = { backgroundColor: checked ? accent : 'transparent' };
+    return (<View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={[styles.indicator, indicatorStyle]}>
+      {checked ? <View style={[styles.check, { borderColor: onAccent }]}/> : null}
+    </View>);
+}
+const styles = StyleSheet.create({
+    content: { gap: 16, flex: 1, minWidth: 0 },
+    horizontal: { flexDirection: 'row', alignItems: 'center' },
+    vertical: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingTop: 24,
+    },
+    label: { flex: 1, minWidth: 0, gap: 4 },
+    centerLabel: { alignSelf: 'stretch', gap: 4 },
+    corner: { position: 'absolute', right: 8, top: 8 },
+    indicator: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    check: {
+        width: 7,
+        height: 12,
+        borderRightWidth: 2.5,
+        borderBottomWidth: 2.5,
+        transform: [{ rotate: '45deg' }, { translateY: -2 }],
+    },
+});
+//# sourceMappingURL=RadioOptionControl.js.map

package/dist/features/form/radio/adapters/inbound/RadioOptionControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOptionControl.js","sourceRoot":"","sources":["../../../../../../src/features/form/radio/adapters/inbound/RadioOptionControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTheme } from '@ankhorage/surface';\nimport React from 'react';\nimport { Platform, Pressable, StyleSheet, View } from 'react-native';\n\nimport type { RadioGroupProps } from '../../../../../types/radio';\nimport { Icon } from '../../../../icon/public';\nimport { Text } from '../../../../typography/public';\nimport {\n  handleRadioOptionKeyDown,\n  type RadioOptionKeyboardTarget,\n} from '../../utils/handleRadioOptionKeyDown';\nimport { resolveRadioOptionColors } from '../../utils/resolveRadioOptionColors';\n\n/*** Render a selectable icon radio option with one accessible radio target and a trailing check. */\nexport function RadioOptionControl<TValue extends string>(props: RadioOptionControlProps<TValue>) {\n  const { theme } = useTheme();\n  const { option, checked, disabled, readOnly, interactionPolicy, onSelect } = props;\n  const colors = resolveRadioOptionColors(theme, props);\n  const [focused, setFocused] = React.useState(false);\n  const keyboardProps =\n    Platform.OS === 'web' && !readOnly && !disabled && interactionPolicy !== 'passive'\n      ? {\n          onKeyDown: (event: React.KeyboardEvent<RadioOptionKeyboardTarget>) =>\n            handleRadioOptionKeyDown(event, onSelect),\n        }\n      : {};\n  const controlStyle = {\n    flex: 1,\n    width: '100%' as const,\n    minHeight: props.size === 'l' ? 84 : 44,\n    borderWidth: checked || focused ? 2 : 1,\n    borderColor: focused ? theme.semantics.border.focus : checked ? colors.accent : colors.border,\n    borderRadius: theme.radii.l,\n    backgroundColor: colors.surface,\n  };\n  return (\n    <Pressable\n      {...keyboardProps}\n      accessibilityRole=\"radio\"\n      accessibilityState={{ checked, disabled }}\n      aria-checked={checked}\n      aria-disabled={disabled}\n      aria-readonly={readOnly}\n      disabled={disabled}\n      onPress={readOnly || interactionPolicy === 'passive' ? undefined : onSelect}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n      testID={option.testID}\n      style={controlStyle}\n    >\n      {(state) => <RadioOptionControlBody {...props} pressed={state.pressed} />}\n    </Pressable>\n  );\n}\n\n/*** Arrange the icon, label and passive indicator within the native radio press target. */\nfunction RadioOptionControlBody<TValue extends string>(\n  props: RadioOptionControlProps<TValue> & { pressed: boolean },\n) {\n  const { theme } = useTheme();\n  const colors = resolveRadioOptionColors(theme, props);\n  const contentStyle = {\n    padding: props.size === 's' ? theme.spacing.s : props.size === 'm' ? 12 : theme.spacing.m,\n    gap:\n      props.layout === 'vertical' || !props.option.iconSource ? theme.spacing.s : theme.spacing.m,\n    ...(!props.option.iconSource ? { flexDirection: 'row-reverse' as const } : {}),\n    opacity: props.disabled ? 0.5 : props.pressed ? 0.7 : 1,\n  };\n  return (\n    <View\n      style={[\n        styles.content,\n        props.layout === 'vertical' ? styles.vertical : styles.horizontal,\n        contentStyle,\n      ]}\n    >\n      <RadioOptionControlContent {...props} />\n      {props.option.iconSource || props.checked ? (\n        <View style={props.layout === 'vertical' ? styles.corner : undefined}>\n          <RadioOptionControlIndicator\n            checked={props.checked}\n            accent={colors.accent}\n            onAccent={colors.onAccent}\n          />\n        </View>\n      ) : null}\n    </View>\n  );\n}\n\ninterface RadioOptionControlProps<TValue extends string> extends Pick<\n  RadioGroupProps<TValue>,\n  'color' | 'size' | 'interactionPolicy'\n> {\n  option: RadioGroupProps<TValue>['options'][number];\n  checked: boolean;\n  disabled: boolean;\n  readOnly: boolean;\n  invalid: boolean;\n  layout: 'horizontal' | 'vertical';\n  onSelect: () => void;\n}\n\n/*** Keep decoration passive while allowing labels to wrap at narrow widths and large text sizes. */\nfunction RadioOptionControlContent<TValue extends string>({\n  option,\n  layout,\n  size,\n  color,\n  invalid,\n  disabled,\n}: RadioOptionControlProps<TValue>) {\n  const { theme } = useTheme();\n  const colors = resolveRadioOptionColors(theme, { color, invalid, disabled });\n  return (\n    <>\n      {option.iconSource ? (\n        <View accessibilityElementsHidden importantForAccessibility=\"no-hide-descendants\">\n          <Icon source={option.iconSource} size={size === 'l' ? 36 : 28} color={colors.accent} />\n        </View>\n      ) : null}\n      <View style={layout === 'horizontal' ? styles.label : styles.centerLabel}>\n        <Text\n          variant={size === 'l' ? 'body' : 'bodySmall'}\n          weight=\"semiBold\"\n          align={layout === 'vertical' || !option.iconSource ? 'center' : 'left'}\n        >\n          {option.label}\n        </Text>\n        {option.description ? (\n          <Text\n            emphasis=\"muted\"\n            variant=\"bodySmall\"\n            align={layout === 'vertical' || !option.iconSource ? 'center' : 'left'}\n          >\n            {option.description}\n          </Text>\n        ) : null}\n      </View>\n    </>\n  );\n}\n\n/*** Draw a passive check using themed geometry without requiring an application media asset. */\nfunction RadioOptionControlIndicator({\n  checked,\n  accent,\n  onAccent,\n}: {\n  checked: boolean;\n  accent: string;\n  onAccent: string;\n}) {\n  const indicatorStyle = { backgroundColor: checked ? accent : 'transparent' };\n  return (\n    <View\n      accessibilityElementsHidden\n      importantForAccessibility=\"no-hide-descendants\"\n      style={[styles.indicator, indicatorStyle]}\n    >\n      {checked ? <View style={[styles.check, { borderColor: onAccent }]} /> : null}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  content: { gap: 16, flex: 1, minWidth: 0 },\n  horizontal: { flexDirection: 'row', alignItems: 'center' },\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingTop: 24,\n  },\n  label: { flex: 1, minWidth: 0, gap: 4 },\n  centerLabel: { alignSelf: 'stretch', gap: 4 },\n  corner: { position: 'absolute', right: 8, top: 8 },\n  indicator: {\n    width: 24,\n    height: 24,\n    borderRadius: 12,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  check: {\n    width: 7,\n    height: 12,\n    borderRightWidth: 2.5,\n    borderBottomWidth: 2.5,\n    transform: [{ rotate: '45deg' }, { translateY: -2 }],\n  },\n});\n"]}

package/dist/features/form/radio/public.d.ts

@@ -0,0 +1,4 @@
+export type { RadioGroupOption, RadioGroupProps, RadioProps } from '../../../types/radio';
+export { Radio } from './adapters/inbound/Radio';
+export { RadioGroup } from './adapters/inbound/RadioGroup';
+//# sourceMappingURL=public.d.ts.map

package/dist/features/form/radio/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../../src/features/form/radio/public.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC1F,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/features/form/radio/public.js

@@ -0,0 +1,3 @@
+export { Radio } from './adapters/inbound/Radio';
+export { RadioGroup } from './adapters/inbound/RadioGroup';
+//# sourceMappingURL=public.js.map

package/dist/features/form/radio/public.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.js","sourceRoot":"","sources":["../../../../src/features/form/radio/public.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC","sourcesContent":["export type { RadioGroupOption, RadioGroupProps, RadioProps } from '../../../types/radio';\nexport { Radio } from './adapters/inbound/Radio';\nexport { RadioGroup } from './adapters/inbound/RadioGroup';\n"]}