@astryxdesign/native 0.7.5-canary.c60f571 → 0.7.5-canary.d76a228

package/README.md

@@ -22,9 +22,9 @@ rests on evidence.
 | Wire           | `AstryxNode`, `AstryxAction`      | Each component as JSON a TypeScript core sends a native host (arm C), and the action a host sends back when a view calls a callback. Swift decodes `<Name>Node` and turns it into `<Name>Props` with `viewProps(send:)`.                     |
 | Logic core     | `@astryxdesign/native/logic`      | `createLogicCore` holds a screen's state, builds its node tree, and reduces actions; `connectBridge` carries it to a native host as JSON. ECMAScript built-ins only, so it runs in Hermes. Shaped after EJ Campbell's astryx-swift spike.    |
 
-Contracts cover Button, Card, Divider, Heading, HStack, ProgressBar, Selector,
-Switch, Text, TextInput, and VStack. React Native and Android bindings are not built yet; see
-[the experiment matrix](#experiment-matrix).
+Contracts cover Badge, Button, Card, Divider, Heading, HStack, ProgressBar,
+Selector, Switch, Text, TextInput, and VStack. React Native and Android
+bindings are not built yet; see [the experiment matrix](#experiment-matrix).
 
 ```ts
 // tsconfig.json for an iOS app: "customConditions": ["ios"]
@@ -124,7 +124,9 @@ const bridge = connectBridge(core, {
 ## Working on it
 
 ```sh
+pnpm -F @astryxdesign/native typecheck        # source and tests
 pnpm -F @astryxdesign/native build            # dist/, including platform types
+pnpm -F @astryxdesign/native typecheck:types  # every platform's types, after build
 pnpm -F @astryxdesign/native generate:apple   # regenerate apple/Sources/.../Generated
 pnpm vitest run --project node packages/native
 ```

package/apple/Sources/AstryxNative/Generated/AstryxNode.swift

@@ -7,6 +7,7 @@ import Foundation
 /// or a known one with a value its enums lack or a required prop missing. An older
 /// app then keeps drawing the rest of a newer core's tree.
 public enum AstryxNode: Decodable, Equatable, Sendable {
+  case badge(BadgeNode)
   case button(ButtonNode)
   case card(CardNode)
   case divider(DividerNode)
@@ -22,6 +23,7 @@ public enum AstryxNode: Decodable, Equatable, Sendable {
 
   public var key: String {
     switch self {
+    case .badge(let node): return node.key
     case .button(let node): return node.key
     case .card(let node): return node.key
     case .divider(let node): return node.key
@@ -45,6 +47,7 @@ public enum AstryxNode: Decodable, Equatable, Sendable {
     let key = try container.decode(String.self, forKey: .key)
     do {
       switch component {
+      case "Badge": self = .badge(try BadgeNode(from: decoder))
       case "Button": self = .button(try ButtonNode(from: decoder))
       case "Card": self = .card(try CardNode(from: decoder))
       case "Divider": self = .divider(try DividerNode(from: decoder))

package/apple/Sources/AstryxNative/Generated/Badge.swift

@@ -0,0 +1,89 @@
+// Generated by @astryxdesign/native. Do not edit.
+public enum BadgeVariant: String, CaseIterable, Codable, Sendable {
+  case neutral = "neutral"
+  case info = "info"
+  case success = "success"
+  case warning = "warning"
+  case error = "error"
+  case blue = "blue"
+  case cyan = "cyan"
+  case green = "green"
+  case orange = "orange"
+  case pink = "pink"
+  case purple = "purple"
+  case red = "red"
+  case teal = "teal"
+  case yellow = "yellow"
+}
+#if os(iOS)
+public struct BadgeProps {
+  /// Base props attach to this part on every platform.
+  public static let baseTarget: AstryxBaseTarget = .root
+  public var base: AstryxBaseProps
+  public var variant: BadgeVariant?
+  public var label: String
+  public init(variant: BadgeVariant? = nil, label: String, base: AstryxBaseProps = AstryxBaseProps()) {
+    self.variant = variant
+    self.label = label
+    self.base = base
+  }
+}
+public struct BadgeNode: Decodable, Equatable, Sendable {
+  public struct Props: Decodable, Equatable, Sendable {
+    public var variant: BadgeVariant?
+    public var label: String
+  }
+  public let key: String
+  public let base: AstryxBaseProps?
+  public let props: Props
+  /// The callbacks the core listens to, by prop name.
+  public let events: [String]?
+
+  public func listens(_ event: String) -> Bool { events?.contains(event) ?? false }
+
+  /// The contract a Badge view takes; its callbacks send actions to the core.
+  public func viewProps(send: @escaping @Sendable (AstryxAction) -> Void) -> BadgeProps {
+    return BadgeProps(
+      variant: props.variant,
+      label: props.label,
+      base: base ?? AstryxBaseProps()
+    )
+  }
+}
+#endif
+#if os(macOS)
+public struct BadgeProps {
+  /// Base props attach to this part on every platform.
+  public static let baseTarget: AstryxBaseTarget = .root
+  public var base: AstryxBaseProps
+  public var variant: BadgeVariant?
+  public var label: String
+  public init(variant: BadgeVariant? = nil, label: String, base: AstryxBaseProps = AstryxBaseProps()) {
+    self.variant = variant
+    self.label = label
+    self.base = base
+  }
+}
+public struct BadgeNode: Decodable, Equatable, Sendable {
+  public struct Props: Decodable, Equatable, Sendable {
+    public var variant: BadgeVariant?
+    public var label: String
+  }
+  public let key: String
+  public let base: AstryxBaseProps?
+  public let props: Props
+  /// The callbacks the core listens to, by prop name.
+  public let events: [String]?
+
+  public func listens(_ event: String) -> Bool { events?.contains(event) ?? false }
+
+  /// The contract a Badge view takes; its callbacks send actions to the core.
+  public func viewProps(send: @escaping @Sendable (AstryxAction) -> Void) -> BadgeProps {
+    return BadgeProps(
+      variant: props.variant,
+      label: props.label,
+      base: base ?? AstryxBaseProps()
+    )
+  }
+}
+#endif

package/apple/Tests/AstryxNativeTests/ControlPropsTests.swift

@@ -15,6 +15,8 @@ import Testing
   let heading = HeadingProps(level: .v2, children: "Orders")
   #expect(heading.level.rawValue == 2)
   #expect(heading.children == "Orders")
+  let badge = BadgeProps(variant: .success, label: "Paid")
+  #expect(badge.label == "Paid")
   let divider = DividerProps(label: "Or")
   #expect(divider.label == "Or")
 }

package/dist/components/Badge.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @file components/Badge.ts
+ * @input None
+ * @output What @astryxdesign/native adds to the core Badge contract
+ * @position Native additions read by fromComponentDoc together with core's
+ *   Badge documentation
+ */
+import type { NativeAdditions } from '../contract/fromComponentDoc.js';
+export declare const badge: NativeAdditions;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iCAAiC,CAAC;AAErE,eAAO,MAAM,KAAK,EAAE,eAKnB,CAAC"}

package/dist/components/Badge.js

@@ -0,0 +1,7 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+export const badge = {
+    name: 'Badge',
+    baseTarget: 'root',
+    // `icon` stays web-only until the core has an icon slot.
+    slots: { label: 'text' },
+};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iCAAiC,CAAC;AAarE,eAAO,MAAM,iBAAiB,EAAE,SAAS,eAAe,EAYvD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iCAAiC,CAAC;AAcrE,eAAO,MAAM,iBAAiB,EAAE,SAAS,eAAe,EAavD,CAAC"}

package/dist/components/index.js

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+import { badge } from './Badge.js';
 import { button } from './Button.js';
 import { card } from './Card.js';
 import { divider } from './Divider.js';
@@ -11,6 +12,7 @@ import { text } from './Text.js';
 import { textInput } from './TextInput.js';
 import { vStack } from './VStack.js';
 export const NATIVE_COMPONENTS = [
+    badge,
     button,
     card,
     divider,

package/dist/types/android.d.ts

@@ -1,6 +1,9 @@
 // Generated by @astryxdesign/native. Do not edit.
-import type {AstryxSharedBaseProps, SelectorOption, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
-export type {AstryxSharedBaseProps, AstryxContentNode, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorOption, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+import type {AstryxSharedBaseProps, SelectorOption, BadgeCoreProps, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+export type {AstryxSharedBaseProps, AstryxContentNode, BadgeCoreProps, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorOption, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+/** Badge props: core contract plus the android contract. */
+export interface BadgeProps extends BadgeCoreProps {}
+export declare function Badge(props: BadgeProps): unknown;
 /** Button props: core contract plus the android contract. */
 export interface ButtonProps extends ButtonCoreProps {}
 export declare function Button(props: ButtonProps): unknown;
@@ -36,6 +39,13 @@ export declare function TextInput(props: TextInputProps): unknown;
 /** VStack props: core contract plus the android contract. */
 export interface VStackProps extends VStackCoreProps {}
 export declare function VStack(props: VStackProps): unknown;
+/** Badge as JSON from a TypeScript core. */
+export interface BadgeNode {
+  component: 'Badge';
+  key: string;
+  base?: AstryxSharedBaseProps;
+  props: {variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'cyan' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'; label: string;};
+}
 /** Button as JSON from a TypeScript core. */
 export interface ButtonNode {
   component: 'Button';
@@ -122,7 +132,7 @@ export interface VStackNode {
   props: {gap?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; padding?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInline?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInlineStart?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInlineEnd?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlock?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlockStart?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlockEnd?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; isScrollable?: boolean; hAlign?: 'start' | 'center' | 'end' | 'stretch'; vAlign?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; align?: 'start' | 'center' | 'end' | 'stretch'; wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'; children?: ReadonlyArray<AstryxNode>;};
 }
 /** Any Astryx component a TypeScript core can send. */
-export type AstryxNode = ButtonNode | CardNode | DividerNode | HeadingNode | HStackNode | ProgressBarNode | SelectorNode | SwitchNode | TextNode | TextInputNode | VStackNode;
+export type AstryxNode = BadgeNode | ButtonNode | CardNode | DividerNode | HeadingNode | HStackNode | ProgressBarNode | SelectorNode | SwitchNode | TextNode | TextInputNode | VStackNode;
 /** A callback a native view called, sent back to the core. */
 export type AstryxAction =
   | {key: string; component: 'Button'; event: 'onClick'; args: []}

package/dist/types/core.d.ts

@@ -15,6 +15,11 @@ export interface SelectorOption {
   disabled?: boolean;
 }
 /** Core contract. Base props attach to the root. */
+export interface BadgeCoreProps extends AstryxSharedBaseProps {
+  variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'cyan' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow';
+  label: string;
+}
+/** Core contract. Base props attach to the root. */
 export interface ButtonCoreProps extends AstryxSharedBaseProps {
   label: string;
   variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';

package/dist/types/ios.d.ts

@@ -1,6 +1,9 @@
 // Generated by @astryxdesign/native. Do not edit.
-import type {AstryxSharedBaseProps, SelectorOption, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
-export type {AstryxSharedBaseProps, AstryxContentNode, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorOption, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+import type {AstryxSharedBaseProps, SelectorOption, BadgeCoreProps, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+export type {AstryxSharedBaseProps, AstryxContentNode, BadgeCoreProps, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorOption, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+/** Badge props: core contract plus the ios contract. */
+export interface BadgeProps extends BadgeCoreProps {}
+export declare function Badge(props: BadgeProps): unknown;
 /** Button props: core contract plus the ios contract. */
 export interface ButtonProps extends ButtonCoreProps {}
 export declare function Button(props: ButtonProps): unknown;
@@ -36,6 +39,13 @@ export declare function TextInput(props: TextInputProps): unknown;
 /** VStack props: core contract plus the ios contract. */
 export interface VStackProps extends VStackCoreProps {}
 export declare function VStack(props: VStackProps): unknown;
+/** Badge as JSON from a TypeScript core. */
+export interface BadgeNode {
+  component: 'Badge';
+  key: string;
+  base?: AstryxSharedBaseProps;
+  props: {variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'cyan' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'; label: string;};
+}
 /** Button as JSON from a TypeScript core. */
 export interface ButtonNode {
   component: 'Button';
@@ -122,7 +132,7 @@ export interface VStackNode {
   props: {gap?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; padding?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInline?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInlineStart?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInlineEnd?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlock?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlockStart?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlockEnd?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; isScrollable?: boolean; hAlign?: 'start' | 'center' | 'end' | 'stretch'; vAlign?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; align?: 'start' | 'center' | 'end' | 'stretch'; wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'; children?: ReadonlyArray<AstryxNode>;};
 }
 /** Any Astryx component a TypeScript core can send. */
-export type AstryxNode = ButtonNode | CardNode | DividerNode | HeadingNode | HStackNode | ProgressBarNode | SelectorNode | SwitchNode | TextNode | TextInputNode | VStackNode;
+export type AstryxNode = BadgeNode | ButtonNode | CardNode | DividerNode | HeadingNode | HStackNode | ProgressBarNode | SelectorNode | SwitchNode | TextNode | TextInputNode | VStackNode;
 /** A callback a native view called, sent back to the core. */
 export type AstryxAction =
   | {key: string; component: 'Button'; event: 'onClick'; args: []}

package/dist/types/macos.d.ts

@@ -1,6 +1,9 @@
 // Generated by @astryxdesign/native. Do not edit.
-import type {AstryxSharedBaseProps, SelectorOption, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
-export type {AstryxSharedBaseProps, AstryxContentNode, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorOption, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+import type {AstryxSharedBaseProps, SelectorOption, BadgeCoreProps, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+export type {AstryxSharedBaseProps, AstryxContentNode, BadgeCoreProps, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorOption, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+/** Badge props: core contract plus the macos contract. */
+export interface BadgeProps extends BadgeCoreProps {}
+export declare function Badge(props: BadgeProps): unknown;
 /** Button props: core contract plus the macos contract. */
 export interface ButtonProps extends ButtonCoreProps {}
 export declare function Button(props: ButtonProps): unknown;
@@ -36,6 +39,13 @@ export declare function TextInput(props: TextInputProps): unknown;
 /** VStack props: core contract plus the macos contract. */
 export interface VStackProps extends VStackCoreProps {}
 export declare function VStack(props: VStackProps): unknown;
+/** Badge as JSON from a TypeScript core. */
+export interface BadgeNode {
+  component: 'Badge';
+  key: string;
+  base?: AstryxSharedBaseProps;
+  props: {variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'cyan' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'; label: string;};
+}
 /** Button as JSON from a TypeScript core. */
 export interface ButtonNode {
   component: 'Button';
@@ -122,7 +132,7 @@ export interface VStackNode {
   props: {gap?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; padding?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInline?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInlineStart?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInlineEnd?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlock?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlockStart?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlockEnd?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; isScrollable?: boolean; hAlign?: 'start' | 'center' | 'end' | 'stretch'; vAlign?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; align?: 'start' | 'center' | 'end' | 'stretch'; wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'; children?: ReadonlyArray<AstryxNode>;};
 }
 /** Any Astryx component a TypeScript core can send. */
-export type AstryxNode = ButtonNode | CardNode | DividerNode | HeadingNode | HStackNode | ProgressBarNode | SelectorNode | SwitchNode | TextNode | TextInputNode | VStackNode;
+export type AstryxNode = BadgeNode | ButtonNode | CardNode | DividerNode | HeadingNode | HStackNode | ProgressBarNode | SelectorNode | SwitchNode | TextNode | TextInputNode | VStackNode;
 /** A callback a native view called, sent back to the core. */
 export type AstryxAction =
   | {key: string; component: 'Button'; event: 'onClick'; args: []}

package/dist/types/shared.d.ts

@@ -1,6 +1,9 @@
 // Generated by @astryxdesign/native. Do not edit.
-import type {AstryxSharedBaseProps, SelectorOption, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
-export type {AstryxSharedBaseProps, AstryxContentNode, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorOption, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+import type {AstryxSharedBaseProps, SelectorOption, BadgeCoreProps, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+export type {AstryxSharedBaseProps, AstryxContentNode, BadgeCoreProps, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorOption, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+/** Badge props: core contract only. */
+export interface BadgeProps extends BadgeCoreProps {}
+export declare function Badge(props: BadgeProps): unknown;
 /** Button props: core contract only. */
 export interface ButtonProps extends ButtonCoreProps {}
 export declare function Button(props: ButtonProps): unknown;
@@ -34,6 +37,13 @@ export declare function TextInput(props: TextInputProps): unknown;
 /** VStack props: core contract only. */
 export interface VStackProps extends VStackCoreProps {}
 export declare function VStack(props: VStackProps): unknown;
+/** Badge as JSON from a TypeScript core. */
+export interface BadgeNode {
+  component: 'Badge';
+  key: string;
+  base?: AstryxSharedBaseProps;
+  props: {variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'cyan' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'; label: string;};
+}
 /** Button as JSON from a TypeScript core. */
 export interface ButtonNode {
   component: 'Button';
@@ -120,7 +130,7 @@ export interface VStackNode {
   props: {gap?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; padding?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInline?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInlineStart?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInlineEnd?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlock?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlockStart?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlockEnd?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; isScrollable?: boolean; hAlign?: 'start' | 'center' | 'end' | 'stretch'; vAlign?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; align?: 'start' | 'center' | 'end' | 'stretch'; wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'; children?: ReadonlyArray<AstryxNode>;};
 }
 /** Any Astryx component a TypeScript core can send. */
-export type AstryxNode = ButtonNode | CardNode | DividerNode | HeadingNode | HStackNode | ProgressBarNode | SelectorNode | SwitchNode | TextNode | TextInputNode | VStackNode;
+export type AstryxNode = BadgeNode | ButtonNode | CardNode | DividerNode | HeadingNode | HStackNode | ProgressBarNode | SelectorNode | SwitchNode | TextNode | TextInputNode | VStackNode;
 /** A callback a native view called, sent back to the core. */
 export type AstryxAction =
   | {key: string; component: 'Button'; event: 'onClick'; args: []}

package/dist/types/windows.d.ts

@@ -1,6 +1,9 @@
 // Generated by @astryxdesign/native. Do not edit.
-import type {AstryxSharedBaseProps, SelectorOption, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
-export type {AstryxSharedBaseProps, AstryxContentNode, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorOption, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+import type {AstryxSharedBaseProps, SelectorOption, BadgeCoreProps, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+export type {AstryxSharedBaseProps, AstryxContentNode, BadgeCoreProps, ButtonCoreProps, CardCoreProps, DividerCoreProps, HeadingCoreProps, HStackCoreProps, ProgressBarCoreProps, SelectorOption, SelectorCoreProps, SwitchCoreProps, TextCoreProps, TextInputCoreProps, VStackCoreProps} from './core.js';
+/** Badge props: core contract plus the windows contract. */
+export interface BadgeProps extends BadgeCoreProps {}
+export declare function Badge(props: BadgeProps): unknown;
 /** Button props: core contract plus the windows contract. */
 export interface ButtonProps extends ButtonCoreProps {}
 export declare function Button(props: ButtonProps): unknown;
@@ -34,6 +37,13 @@ export declare function TextInput(props: TextInputProps): unknown;
 /** VStack props: core contract plus the windows contract. */
 export interface VStackProps extends VStackCoreProps {}
 export declare function VStack(props: VStackProps): unknown;
+/** Badge as JSON from a TypeScript core. */
+export interface BadgeNode {
+  component: 'Badge';
+  key: string;
+  base?: AstryxSharedBaseProps;
+  props: {variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'cyan' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'; label: string;};
+}
 /** Button as JSON from a TypeScript core. */
 export interface ButtonNode {
   component: 'Button';
@@ -120,7 +130,7 @@ export interface VStackNode {
   props: {gap?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; padding?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInline?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInlineStart?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingInlineEnd?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlock?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlockStart?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; paddingBlockEnd?: 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10; isScrollable?: boolean; hAlign?: 'start' | 'center' | 'end' | 'stretch'; vAlign?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; align?: 'start' | 'center' | 'end' | 'stretch'; wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'; children?: ReadonlyArray<AstryxNode>;};
 }
 /** Any Astryx component a TypeScript core can send. */
-export type AstryxNode = ButtonNode | CardNode | DividerNode | HeadingNode | HStackNode | ProgressBarNode | SelectorNode | SwitchNode | TextNode | TextInputNode | VStackNode;
+export type AstryxNode = BadgeNode | ButtonNode | CardNode | DividerNode | HeadingNode | HStackNode | ProgressBarNode | SelectorNode | SwitchNode | TextNode | TextInputNode | VStackNode;
 /** A callback a native view called, sent back to the core. */
 export type AstryxAction =
   | {key: string; component: 'Button'; event: 'onClick'; args: []}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/native",
-  "version": "0.7.5-canary.c60f571",
+  "version": "0.7.5-canary.d76a228",
   "description": "Experimental native platforms for Astryx (iOS, Android, macOS, Windows) — published to npm only under the @canary dist-tag; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -69,15 +69,16 @@
     }
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.7.5-canary.c60f571"
+    "@astryxdesign/core": "0.7.5-canary.d76a228"
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.7.5-canary.c60f571"
+    "@astryxdesign/core": "0.7.5-canary.d76a228"
   },
   "scripts": {
     "build": "node ../../scripts/clean-dist.mjs && tsc --project tsconfig.build.json && node scripts/generate.mjs --types",
     "generate:apple": "pnpm build && node scripts/generate.mjs --apple",
     "test": "vitest run --root ../.. packages/native",
-    "typecheck": "tsc --project tsconfig.json --noEmit"
+    "typecheck": "tsc --project tsconfig.json --noEmit",
+    "typecheck:types": "tsc --project tsconfig.types.json"
   }
 }

package/src/components/Badge.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file components/Badge.ts
+ * @input None
+ * @output What @astryxdesign/native adds to the core Badge contract
+ * @position Native additions read by fromComponentDoc together with core's
+ *   Badge documentation
+ */
+
+import type {NativeAdditions} from '../contract/fromComponentDoc.js';
+
+export const badge: NativeAdditions = {
+  name: 'Badge',
+  baseTarget: 'root',
+  // `icon` stays web-only until the core has an icon slot.
+  slots: {label: 'text'},
+};

package/src/components/index.ts

@@ -9,6 +9,7 @@
  */
 
 import type {NativeAdditions} from '../contract/fromComponentDoc.js';
+import {badge} from './Badge.js';
 import {button} from './Button.js';
 import {card} from './Card.js';
 import {divider} from './Divider.js';
@@ -22,6 +23,7 @@ import {textInput} from './TextInput.js';
 import {vStack} from './VStack.js';
 
 export const NATIVE_COMPONENTS: readonly NativeAdditions[] = [
+  badge,
   button,
   card,
   divider,

package/src/contract/contracts.test.ts

@@ -76,6 +76,13 @@ describe('native contracts', () => {
       values: [1, 2, 3, 4, 5, 6],
     });
     expect(byName.get('Text')!.core).not.toHaveProperty('id');
+    expect(byName.get('Badge')!.core.label).toMatchObject({
+      type: {kind: 'string'},
+      optional: false,
+    });
+    expect(byName.get('Badge')!.webOnly.map(prop => prop.name)).toContain(
+      'icon',
+    );
   });
 
   it('reports naming and portability errors', () => {