@almadar/std 16.228.0 → 16.230.0

package/behaviors/registry/ui/core/atoms/std-pricing.orb

@@ -0,0 +1,751 @@
+{
+  "description": "std-pricing — side-by-side plan cards from a config list: plan name, price and billing period, a one-line summary, the included features, and a link action per plan; one plan can be highlighted as recommended with a badge. Optional heading and footnote. Clicking a plan's action follows its href and emits PLAN_SELECTED. Pick for pricing pages, subscription tiers and service packages.",
+  "ledger": {
+    "entries": {
+      "ent_01M3B9EHMYJMWT16GY4YVVFFQA": {
+        "bakedName": "PricingView",
+        "curName": "PricingView",
+        "id": "ent_01M3B9EHMYJMWT16GY4YVVFFQA",
+        "kind": "entity",
+        "owner": "workspace",
+        "renames": []
+      },
+      "evt_01M3B9EHMY11DJ79Z9ZEHWJDVR": {
+        "bakedName": "INIT",
+        "curName": "INIT",
+        "id": "evt_01M3B9EHMY11DJ79Z9ZEHWJDVR",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M3B9EHMYDEDQ3HJ11A59MDB0",
+        "renames": []
+      },
+      "evt_01M3B9EHMYNCDEQADTEZ52AKPP": {
+        "bakedName": "PLAN_CHOOSE",
+        "curName": "PLAN_CHOOSE",
+        "id": "evt_01M3B9EHMYNCDEQADTEZ52AKPP",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M3B9EHMYDEDQ3HJ11A59MDB0",
+        "renames": []
+      },
+      "evt_01M3B9EHMYY0731RCKSV1N5WJ5": {
+        "bakedName": "PLAN_SELECTED",
+        "curName": "PLAN_SELECTED",
+        "id": "evt_01M3B9EHMYY0731RCKSV1N5WJ5",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M3B9EHMYDEDQ3HJ11A59MDB0",
+        "renames": []
+      },
+      "orb_01M3B9EHMYGZE023BZ39P71PMN": {
+        "bakedName": "PricingOrbital",
+        "curName": "PricingOrbital",
+        "id": "orb_01M3B9EHMYGZE023BZ39P71PMN",
+        "kind": "orbital",
+        "owner": "workspace",
+        "renames": []
+      },
+      "pag_01M3B9EHMZ5B01JD03N1BFRGSF": {
+        "bakedName": "PricingPage",
+        "curName": "PricingPage",
+        "id": "pag_01M3B9EHMZ5B01JD03N1BFRGSF",
+        "kind": "page",
+        "owner": "workspace",
+        "renames": []
+      },
+      "trt_01M3B9EHMYDEDQ3HJ11A59MDB0": {
+        "bakedName": "PricingRender",
+        "curName": "PricingRender",
+        "id": "trt_01M3B9EHMYDEDQ3HJ11A59MDB0",
+        "kind": "trait",
+        "owner": "workspace",
+        "renames": []
+      }
+    },
+    "schemaVersion": 1
+  },
+  "name": "std-pricing",
+  "orbitals": [
+    {
+      "entity": {
+        "fields": [
+          {
+            "name": "id",
+            "required": true,
+            "type": "string"
+          }
+        ],
+        "id": "ent_01M3B9EHMYJMWT16GY4YVVFFQA",
+        "name": "PricingView",
+        "persistence": "runtime"
+      },
+      "id": "orb_01M3B9EHMYGZE023BZ39P71PMN",
+      "name": "PricingOrbital",
+      "pages": [
+        {
+          "id": "pag_01M3B9EHMZ5B01JD03N1BFRGSF",
+          "name": "PricingPage",
+          "path": "/pricing",
+          "traits": [
+            {
+              "ref": "PricingRender",
+              "refId": "trt_01M3B9EHMYDEDQ3HJ11A59MDB0"
+            }
+          ]
+        }
+      ],
+      "traits": [
+        {
+          "category": "interaction",
+          "config": {
+            "footnote": {
+              "default": "",
+              "description": "Small print under the plans, e.g. taxes or billing terms",
+              "label": "Footnote",
+              "tier": "presentation",
+              "type": "string"
+            },
+            "heading": {
+              "default": "",
+              "description": "Section heading above the plans; empty hides it",
+              "label": "Heading",
+              "synonyms": "title",
+              "tier": "presentation",
+              "type": "string"
+            },
+            "lede": {
+              "default": "",
+              "label": "Supporting text",
+              "tier": "presentation",
+              "type": "string"
+            },
+            "plans": {
+              "default": [
+                {
+                  "actionHref": "#",
+                  "actionLabel": "Start free",
+                  "features": [
+                    "1 project",
+                    "Community support"
+                  ],
+                  "name": "Starter",
+                  "period": "/month",
+                  "price": "$0",
+                  "summary": "For trying things out."
+                },
+                {
+                  "actionHref": "#",
+                  "actionLabel": "Choose Team",
+                  "badge": "Popular",
+                  "features": [
+                    "Unlimited projects",
+                    "Shared workspace",
+                    "Priority support"
+                  ],
+                  "highlighted": true,
+                  "name": "Team",
+                  "period": "/month",
+                  "price": "$29",
+                  "summary": "For teams shipping every week."
+                }
+              ],
+              "description": "One card per plan: name, price, period, summary, features, action; `highlighted` marks the recommended plan",
+              "items": {
+                "properties": {
+                  "actionHref": {
+                    "name": "actionHref",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "actionLabel": {
+                    "name": "actionLabel",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "badge": {
+                    "name": "badge",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "features": {
+                    "items": {
+                      "type": "string"
+                    },
+                    "name": "features",
+                    "required": false,
+                    "type": "array"
+                  },
+                  "highlighted": {
+                    "name": "highlighted",
+                    "required": false,
+                    "type": "boolean"
+                  },
+                  "name": {
+                    "name": "name",
+                    "required": true,
+                    "type": "string"
+                  },
+                  "period": {
+                    "name": "period",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "price": {
+                    "name": "price",
+                    "required": true,
+                    "type": "string"
+                  },
+                  "summary": {
+                    "name": "summary",
+                    "required": false,
+                    "type": "string"
+                  }
+                },
+                "type": "object"
+              },
+              "label": "Plans",
+              "synonyms": "tiers, packages, subscriptions, pricing table",
+              "tier": "presentation",
+              "type": "[PricingPlan]"
+            },
+            "surface": {
+              "default": "plain",
+              "label": "Surface",
+              "tier": "presentation",
+              "type": "string",
+              "values": [
+                "plain",
+                "muted"
+              ]
+            }
+          },
+          "effectRow": [
+            {
+              "kind": "emit",
+              "resource": "PLAN_SELECTED"
+            },
+            {
+              "kind": "render-ui",
+              "resource": "main"
+            }
+          ],
+          "emits": [
+            {
+              "description": "A plan's action was clicked; carries the plan name and its href.",
+              "event": "PLAN_SELECTED",
+              "eventId": "evt_01M3B9EHMYY0731RCKSV1N5WJ5",
+              "payloadSchema": [
+                {
+                  "name": "plan",
+                  "type": "string"
+                },
+                {
+                  "name": "href",
+                  "type": "string"
+                }
+              ],
+              "scope": "external",
+              "synonyms": "choose plan, select tier, subscribe click",
+              "tier": "domain"
+            }
+          ],
+          "entityContract": {
+            "provides": [],
+            "requires": []
+          },
+          "entityRebindable": true,
+          "entityRefIds": {
+            "PricingView": "ent_01M3B9EHMYJMWT16GY4YVVFFQA"
+          },
+          "id": "trt_01M3B9EHMYDEDQ3HJ11A59MDB0",
+          "linkedEntity": "PricingView",
+          "linkedEntityId": "ent_01M3B9EHMYJMWT16GY4YVVFFQA",
+          "name": "PricingRender",
+          "scope": "instance",
+          "stateMachine": {
+            "events": [
+              {
+                "id": "evt_01M3B9EHMY11DJ79Z9ZEHWJDVR",
+                "key": "INIT",
+                "name": "Initialize"
+              },
+              {
+                "description": "Plan action click.",
+                "id": "evt_01M3B9EHMYNCDEQADTEZ52AKPP",
+                "key": "PLAN_CHOOSE",
+                "name": "Plan Choose",
+                "payloadSchema": [
+                  {
+                    "name": "plan",
+                    "type": "string"
+                  },
+                  {
+                    "name": "href",
+                    "type": "string"
+                  }
+                ],
+                "tier": "internal"
+              },
+              {
+                "description": "A plan's action was clicked; carries the plan name and its href.",
+                "id": "evt_01M3B9EHMYY0731RCKSV1N5WJ5",
+                "key": "PLAN_SELECTED",
+                "name": "Plan Selected",
+                "payloadSchema": [
+                  {
+                    "name": "plan",
+                    "type": "string"
+                  },
+                  {
+                    "name": "href",
+                    "type": "string"
+                  }
+                ],
+                "synonyms": "choose plan, select tier, subscribe click",
+                "tier": "domain"
+              }
+            ],
+            "states": [
+              {
+                "isInitial": true,
+                "name": "idle"
+              }
+            ],
+            "transitions": [
+              {
+                "effects": [
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "bg": [
+                        "if",
+                        [
+                          "==",
+                          "@config.surface",
+                          "muted"
+                        ],
+                        "muted",
+                        "transparent"
+                      ],
+                      "children": [
+                        {
+                          "children": [
+                            {
+                              "children": [
+                                {
+                                  "align": "center",
+                                  "children": [
+                                    {
+                                      "align": "center",
+                                      "className": [
+                                        "if",
+                                        [
+                                          "==",
+                                          "@config.heading",
+                                          ""
+                                        ],
+                                        "hidden",
+                                        "tracking-tight text-balance"
+                                      ],
+                                      "content": "@config.heading",
+                                      "type": "typography",
+                                      "variant": "h2",
+                                      "weight": "bold"
+                                    },
+                                    {
+                                      "align": "center",
+                                      "className": [
+                                        "if",
+                                        [
+                                          "==",
+                                          "@config.lede",
+                                          ""
+                                        ],
+                                        "hidden",
+                                        "max-w-2xl text-pretty"
+                                      ],
+                                      "color": "muted",
+                                      "content": "@config.lede",
+                                      "type": "typography",
+                                      "variant": "large"
+                                    }
+                                  ],
+                                  "className": [
+                                    "if",
+                                    [
+                                      "==",
+                                      "@config.heading",
+                                      ""
+                                    ],
+                                    [
+                                      "if",
+                                      [
+                                        "==",
+                                        "@config.lede",
+                                        ""
+                                      ],
+                                      "hidden",
+                                      ""
+                                    ],
+                                    ""
+                                  ],
+                                  "direction": "vertical",
+                                  "gap": "sm",
+                                  "type": "stack"
+                                },
+                                {
+                                  "children": [
+                                    "array/map",
+                                    "@config.plans",
+                                    [
+                                      "fn",
+                                      "plan",
+                                      {
+                                        "children": [
+                                          {
+                                            "children": [
+                                              {
+                                                "align": "center",
+                                                "children": [
+                                                  {
+                                                    "content": [
+                                                      "object/get",
+                                                      "@plan",
+                                                      "name",
+                                                      ""
+                                                    ],
+                                                    "type": "typography",
+                                                    "variant": "h4",
+                                                    "weight": "semibold"
+                                                  },
+                                                  {
+                                                    "label": [
+                                                      "object/get",
+                                                      "@plan",
+                                                      "badge",
+                                                      ""
+                                                    ],
+                                                    "type": "badge",
+                                                    "variant": "primary"
+                                                  }
+                                                ],
+                                                "direction": "horizontal",
+                                                "gap": "sm",
+                                                "justify": "between",
+                                                "type": "stack"
+                                              },
+                                              {
+                                                "align": "baseline",
+                                                "children": [
+                                                  {
+                                                    "className": "tracking-tight",
+                                                    "content": [
+                                                      "object/get",
+                                                      "@plan",
+                                                      "price",
+                                                      ""
+                                                    ],
+                                                    "type": "typography",
+                                                    "variant": "h2",
+                                                    "weight": "bold"
+                                                  },
+                                                  {
+                                                    "className": [
+                                                      "if",
+                                                      [
+                                                        "==",
+                                                        [
+                                                          "object/get",
+                                                          "@plan",
+                                                          "period",
+                                                          ""
+                                                        ],
+                                                        ""
+                                                      ],
+                                                      "hidden",
+                                                      ""
+                                                    ],
+                                                    "color": "muted",
+                                                    "content": [
+                                                      "object/get",
+                                                      "@plan",
+                                                      "period",
+                                                      ""
+                                                    ],
+                                                    "type": "typography",
+                                                    "variant": "body"
+                                                  }
+                                                ],
+                                                "direction": "horizontal",
+                                                "gap": "xs",
+                                                "type": "stack"
+                                              },
+                                              {
+                                                "className": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    [
+                                                      "object/get",
+                                                      "@plan",
+                                                      "summary",
+                                                      ""
+                                                    ],
+                                                    ""
+                                                  ],
+                                                  "hidden",
+                                                  "text-pretty"
+                                                ],
+                                                "color": "muted",
+                                                "content": [
+                                                  "object/get",
+                                                  "@plan",
+                                                  "summary",
+                                                  ""
+                                                ],
+                                                "type": "typography",
+                                                "variant": "body"
+                                              },
+                                              {
+                                                "type": "divider"
+                                              },
+                                              {
+                                                "className": "flex-1",
+                                                "content": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    [
+                                                      "array/len",
+                                                      [
+                                                        "object/get",
+                                                        "@plan",
+                                                        "features",
+                                                        []
+                                                      ]
+                                                    ],
+                                                    0.0
+                                                  ],
+                                                  "",
+                                                  [
+                                                    "str/concat",
+                                                    "- ",
+                                                    [
+                                                      "str/join",
+                                                      [
+                                                        "object/get",
+                                                        "@plan",
+                                                        "features",
+                                                        []
+                                                      ],
+                                                      "\n- "
+                                                    ]
+                                                  ]
+                                                ],
+                                                "type": "markdown-content"
+                                              },
+                                              {
+                                                "action": "PLAN_CHOOSE",
+                                                "actionPayload": {
+                                                  "href": [
+                                                    "object/get",
+                                                    "@plan",
+                                                    "actionHref",
+                                                    ""
+                                                  ],
+                                                  "plan": [
+                                                    "object/get",
+                                                    "@plan",
+                                                    "name",
+                                                    ""
+                                                  ]
+                                                },
+                                                "className": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    [
+                                                      "object/get",
+                                                      "@plan",
+                                                      "actionLabel",
+                                                      ""
+                                                    ],
+                                                    ""
+                                                  ],
+                                                  "hidden",
+                                                  "w-full"
+                                                ],
+                                                "href": [
+                                                  "object/get",
+                                                  "@plan",
+                                                  "actionHref",
+                                                  ""
+                                                ],
+                                                "label": [
+                                                  "object/get",
+                                                  "@plan",
+                                                  "actionLabel",
+                                                  ""
+                                                ],
+                                                "size": "lg",
+                                                "type": "button",
+                                                "variant": [
+                                                  "if",
+                                                  [
+                                                    "object/get",
+                                                    "@plan",
+                                                    "highlighted",
+                                                    false
+                                                  ],
+                                                  "primary",
+                                                  "secondary"
+                                                ]
+                                              }
+                                            ],
+                                            "className": "h-full",
+                                            "direction": "vertical",
+                                            "gap": "md",
+                                            "type": "stack"
+                                          }
+                                        ],
+                                        "className": [
+                                          "if",
+                                          [
+                                            "object/get",
+                                            "@plan",
+                                            "highlighted",
+                                            false
+                                          ],
+                                          "h-full ring-2 ring-primary",
+                                          "h-full"
+                                        ],
+                                        "look": "elevated",
+                                        "padding": "lg",
+                                        "type": "card"
+                                      }
+                                    ]
+                                  ],
+                                  "className": "items-stretch",
+                                  "cols": [
+                                    "math/min",
+                                    [
+                                      "math/max",
+                                      [
+                                        "array/len",
+                                        "@config.plans"
+                                      ],
+                                      1.0
+                                    ],
+                                    4.0
+                                  ],
+                                  "gap": "lg",
+                                  "type": "simple-grid"
+                                },
+                                {
+                                  "align": "center",
+                                  "className": [
+                                    "if",
+                                    [
+                                      "==",
+                                      "@config.footnote",
+                                      ""
+                                    ],
+                                    "hidden",
+                                    ""
+                                  ],
+                                  "color": "muted",
+                                  "content": "@config.footnote",
+                                  "type": "typography",
+                                  "variant": "caption"
+                                }
+                              ],
+                              "direction": "vertical",
+                              "gap": "xl",
+                              "type": "stack"
+                            }
+                          ],
+                          "maxWidth": "xl",
+                          "padding": "lg",
+                          "size": "xl",
+                          "type": "container"
+                        }
+                      ],
+                      "fullWidth": true,
+                      "paddingY": "xl",
+                      "type": "box"
+                    }
+                  ]
+                ],
+                "event": "INIT",
+                "eventId": "evt_01M3B9EHMY11DJ79Z9ZEHWJDVR",
+                "from": "idle",
+                "to": "idle"
+              },
+              {
+                "effects": [
+                  [
+                    "emit",
+                    "PLAN_SELECTED",
+                    {
+                      "href": "@payload.href",
+                      "plan": "@payload.plan"
+                    }
+                  ]
+                ],
+                "event": "PLAN_CHOOSE",
+                "eventId": "evt_01M3B9EHMYNCDEQADTEZ52AKPP",
+                "from": "idle",
+                "to": "idle"
+              }
+            ]
+          }
+        }
+      ],
+      "types": {
+        "PricingPlan": [
+          {
+            "name": "name",
+            "required": true,
+            "type": "string"
+          },
+          {
+            "name": "price",
+            "required": true,
+            "type": "string"
+          },
+          {
+            "name": "period",
+            "type": "string"
+          },
+          {
+            "name": "summary",
+            "type": "string"
+          },
+          {
+            "name": "features",
+            "type": "[string]"
+          },
+          {
+            "name": "actionLabel",
+            "type": "string"
+          },
+          {
+            "name": "actionHref",
+            "type": "string"
+          },
+          {
+            "name": "highlighted",
+            "type": "boolean"
+          },
+          {
+            "name": "badge",
+            "type": "string"
+          }
+        ]
+      }
+    }
+  ],
+  "schemaVersion": 1,
+  "version": "1.0.0"
+}