{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "POS Controls Showcase",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 80,
      "padding": [80, 120],
      "children": [
        {
          "type": "frame",
          "id": "NumpadKeysSection",
          "name": "Numpad Keys Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "NumpadHeader",
              "name": "numpadSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "NumpadBadge",
                  "name": "shBadge",
                  "fill": "#FF5C0018",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {
                      "type": "text",
                      "id": "NumpadBadgeText",
                      "name": "badgeText",
                      "fill": "$orange-primary",
                      "content": "NUMPAD KEYS",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "500",
                      "letterSpacing": 2
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "NumpadTitle",
                  "name": "shTitle",
                  "fill": "$text-primary",
                  "content": "Touch-First Keypad",
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 42,
                  "fontWeight": "normal",
                  "letterSpacing": -1
                },
                {
                  "type": "text",
                  "id": "NumpadDesc",
                  "name": "shDesc",
                  "fill": "$text-tertiary",
                  "textGrowth": "fixed-width",
                  "width": 600,
                  "content": "Large touch targets (64px) for fast, error-free input in POS environments.",
                  "lineHeight": 1.6,
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 16,
                  "fontWeight": "normal"
                }
              ]
            },
            {
              "type": "frame",
              "id": "NumpadExamples",
              "name": "numpadKeyExamples",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "gap": 16,
              "padding": 40,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "NumKey1",
                  "name": "Atom/NumpadKey/Standard",
                  "reusable": true,
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-elevated",
                  "cornerRadius": 12,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NumKey1Text",
                      "name": "keyLabel",
                      "fill": "$text-primary",
                      "content": "1",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NumKey2",
                  "name": "exampleNumpadKey2",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-elevated",
                  "cornerRadius": 12,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NumKey2Text",
                      "name": "keyLabel",
                      "fill": "$text-primary",
                      "content": "2",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NumKey3",
                  "name": "exampleNumpadKey3",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-elevated",
                  "cornerRadius": 12,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NumKey3Text",
                      "name": "keyLabel",
                      "fill": "$text-primary",
                      "content": "3",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NumKeyClear",
                  "name": "Atom/NumpadKey/Action/Clear",
                  "reusable": true,
                  "width": 64,
                  "height": 64,
                  "fill": "#EF444418",
                  "cornerRadius": 12,
                  "stroke": {"thickness": 1, "fill": "#EF4444"},
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NumKeyClearText",
                      "name": "keyLabel",
                      "fill": "#EF4444",
                      "content": "C",
                      "fontFamily": "Roboto",
                      "fontSize": 20,
                      "fontWeight": "700"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NumKeyEnter",
                  "name": "Atom/NumpadKey/Action/Enter",
                  "reusable": true,
                  "width": 64,
                  "height": 64,
                  "fill": {
                    "type": "gradient",
                    "gradientType": "linear",
                    "enabled": true,
                    "rotation": 135,
                    "size": {"height": 1},
                    "colors": [
                      {"color": "#FF5C00", "position": 0},
                      {"color": "#FF8A4C", "position": 1}
                    ]
                  },
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "NumKeyEnterIcon",
                      "name": "keyIcon",
                      "width": 24,
                      "height": 24,
                      "iconFontName": "corner-down-left",
                      "iconFontFamily": "lucide",
                      "fill": "$text-primary"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "QuantitySection",
          "name": "Quantity Controls Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "QtyHeader",
              "name": "qtySectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "QtyBadge",
                  "name": "shBadge",
                  "fill": "#FF5C0018",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {
                      "type": "text",
                      "id": "QtyBadgeText",
                      "name": "badgeText",
                      "fill": "$orange-primary",
                      "content": "QUANTITY CONTROLS",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "500",
                      "letterSpacing": 2
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "QtyTitle",
                  "name": "shTitle",
                  "fill": "$text-primary",
                  "content": "Quantity Toggles",
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 42,
                  "fontWeight": "normal",
                  "letterSpacing": -1
                }
              ]
            },
            {
              "type": "frame",
              "id": "QtyExamples",
              "name": "quantityControlExamples",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "gap": 32,
              "padding": 40,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "QtyToggle1",
                  "name": "Atom/QuantityToggle",
                  "reusable": true,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "gap": 0,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "QtyMinus",
                      "name": "minusBtn",
                      "width": 48,
                      "height": 48,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "QtyMinusIcon",
                          "name": "icon",
                          "width": 20,
                          "height": 20,
                          "iconFontName": "minus",
                          "iconFontFamily": "lucide",
                          "fill": "$text-secondary"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QtyValue",
                      "name": "valueDisplay",
                      "width": 56,
                      "height": 48,
                      "fill": "$bg-surface",
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "QtyValueText",
                          "name": "value",
                          "fill": "$text-primary",
                          "content": "1",
                          "fontFamily": "Roboto",
                          "fontSize": 18,
                          "fontWeight": "600"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QtyPlus",
                      "name": "plusBtn",
                      "width": 48,
                      "height": 48,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "QtyPlusIcon",
                          "name": "icon",
                          "width": 20,
                          "height": 20,
                          "iconFontName": "plus",
                          "iconFontFamily": "lucide",
                          "fill": "$orange-primary"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "StatusGroup",
                  "name": "statusIndicatorExamples",
                  "gap": 24,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "StatusOnline",
                      "name": "Atom/StatusIndicator/Online",
                      "reusable": true,
                      "gap": 8,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "ellipse",
                          "id": "StatusOnlineDot",
                          "name": "dot",
                          "width": 10,
                          "height": 10,
                          "fill": "$green-success"
                        },
                        {
                          "type": "text",
                          "id": "StatusOnlineText",
                          "name": "label",
                          "fill": "$text-secondary",
                          "content": "Online",
                          "fontFamily": "Roboto",
                          "fontSize": 13,
                          "fontWeight": "500"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "StatusOffline",
                      "name": "Atom/StatusIndicator/Offline",
                      "reusable": true,
                      "gap": 8,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "ellipse",
                          "id": "StatusOfflineDot",
                          "name": "dot",
                          "width": 10,
                          "height": 10,
                          "fill": "#EF4444"
                        },
                        {
                          "type": "text",
                          "id": "StatusOfflineText",
                          "name": "label",
                          "fill": "$text-secondary",
                          "content": "Offline",
                          "fontFamily": "Roboto",
                          "fontSize": 13,
                          "fontWeight": "500"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "StatusBusy",
                      "name": "Atom/StatusIndicator/Busy",
                      "reusable": true,
                      "gap": 8,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "ellipse",
                          "id": "StatusBusyDot",
                          "name": "dot",
                          "width": 10,
                          "height": 10,
                          "fill": "#F59E0B"
                        },
                        {
                          "type": "text",
                          "id": "StatusBusyText",
                          "name": "label",
                          "fill": "$text-secondary",
                          "content": "Busy",
                          "fontFamily": "Roboto",
                          "fontSize": 13,
                          "fontWeight": "500"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-elevated": {"type": "color", "value": "#1A1A1D"},
    "bg-interactive": {"type": "color", "value": "#2A2A2E"},
    "bg-page": {"type": "color", "value": "#0A0A0B"},
    "bg-surface": {"type": "color", "value": "#111113"},
    "border-default": {"type": "color", "value": "#2A2A2E"},
    "border-subtle": {"type": "color", "value": "#1F1F23"},
    "green-success": {"type": "color", "value": "#22C55E"},
    "orange-light": {"type": "color", "value": "#FF8A4C"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "text-disabled": {"type": "color", "value": "#6B6B70"},
    "text-muted": {"type": "color", "value": "#FFFFFFCC"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"}
  }
}
