@hanzogui/card 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/cjs/Card.cjs

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var Card_exports = {};
+__export(Card_exports, {
+  Card: () => Card,
+  CardBackground: () => CardBackground,
+  CardFooter: () => CardFooter,
+  CardFrame: () => CardFrame,
+  CardHeader: () => CardHeader
+});
+module.exports = __toCommonJS(Card_exports);
+var import_gui_stacks = require("@hanzo/gui-stacks"),
+  import_gui_web = require("@hanzo/gui-web");
+const CardContext = (0, import_gui_web.createStyledContext)({
+    size: "$true"
+  }),
+  CardFrame = (0, import_gui_web.styled)(import_gui_stacks.YStack, {
+    name: "Card",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          size: "$true",
+          backgroundColor: "$background",
+          position: "relative"
+        }
+      },
+      size: {
+        "...size": (val, {
+          tokens
+        }) => ({
+          borderRadius: tokens.radius[val] ?? val
+        })
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardHeader = (0, import_gui_web.styled)(import_gui_stacks.YStack, {
+    name: "CardHeader",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 10,
+          backgroundColor: "transparent",
+          marginBottom: "auto"
+        }
+      },
+      size: {
+        "...size": (val, {
+          tokens
+        }) => ({
+          padding: tokens.space[val] ?? val
+        })
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardFooter = (0, import_gui_web.styled)(CardHeader, {
+    name: "CardFooter",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 5,
+          flexDirection: "row",
+          marginTop: "auto",
+          marginBottom: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardBackground = (0, import_gui_web.styled)(import_gui_stacks.YStack, {
+    name: "CardBackground",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 0,
+          fullscreen: !0,
+          overflow: "hidden",
+          pointerEvents: "none",
+          padding: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  Card = (0, import_gui_web.withStaticProperties)(CardFrame, {
+    Header: CardHeader,
+    Footer: CardFooter,
+    Background: CardBackground
+  });

package/dist/cjs/Card.native.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var Card_exports = {};
+__export(Card_exports, {
+  Card: () => Card,
+  CardBackground: () => CardBackground,
+  CardFooter: () => CardFooter,
+  CardFrame: () => CardFrame,
+  CardHeader: () => CardHeader
+});
+module.exports = __toCommonJS(Card_exports);
+var import_gui_stacks = require("@hanzo/gui-stacks"),
+  import_gui_web = require("@hanzo/gui-web"),
+  CardContext = (0, import_gui_web.createStyledContext)({
+    size: "$true"
+  }),
+  CardFrame = (0, import_gui_web.styled)(import_gui_stacks.YStack, {
+    name: "Card",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          size: "$true",
+          backgroundColor: "$background",
+          position: "relative"
+        }
+      },
+      size: {
+        "...size": function (val, param) {
+          var {
+              tokens
+            } = param,
+            _tokens_radius_val;
+          return {
+            borderRadius: (_tokens_radius_val = tokens.radius[val]) !== null && _tokens_radius_val !== void 0 ? _tokens_radius_val : val
+          };
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardHeader = (0, import_gui_web.styled)(import_gui_stacks.YStack, {
+    name: "CardHeader",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 10,
+          backgroundColor: "transparent",
+          marginBottom: "auto"
+        }
+      },
+      size: {
+        "...size": function (val, param) {
+          var {
+              tokens
+            } = param,
+            _tokens_space_val;
+          return {
+            padding: (_tokens_space_val = tokens.space[val]) !== null && _tokens_space_val !== void 0 ? _tokens_space_val : val
+          };
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardFooter = (0, import_gui_web.styled)(CardHeader, {
+    name: "CardFooter",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 5,
+          flexDirection: "row",
+          marginTop: "auto",
+          marginBottom: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardBackground = (0, import_gui_web.styled)(import_gui_stacks.YStack, {
+    name: "CardBackground",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 0,
+          fullscreen: !0,
+          overflow: "hidden",
+          pointerEvents: "none",
+          padding: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  Card = (0, import_gui_web.withStaticProperties)(CardFrame, {
+    Header: CardHeader,
+    Footer: CardFooter,
+    Background: CardBackground
+  });
+//# sourceMappingURL=Card.native.js.map

package/dist/cjs/Card.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Card_exports","__export","Card","CardBackground","CardFooter","CardFrame","CardHeader","module","exports","import_gui_stacks","require","import_gui_web","CardContext","createStyledContext","size","styled","YStack","name","context","variants","unstyled","false","backgroundColor","position","...size","val","param","tokens","_tokens_radius_val","borderRadius","radius","defaultVariants","process","env","HANZO_GUI_HEADLESS","zIndex","marginBottom","_tokens_space_val","padding","space","flexDirection","marginTop","fullscreen","overflow","pointerEvents"],"sources":["../../src/Card.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,YAAA;AAAAC,QAAA,CAAAD,YAAA;EAAAE,IAAA,EAAAA,CAAA,KAAAA,IAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA,cAAA;EAAAC,UAAA,EAAAA,CAAA,KAAAA,UAAA;EAAAC,SAAA,EAAAA,CAAA,KAAAA,SAAA;EAAAC,UAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAb,YAAuB,CAAAK,YAAA;AAIvB,IAAAS,iBAAM,GAAcC,OAAA;EAAAC,cAAoB,GAAAD,OAAA;EAAAE,WAAA,OAAAD,cAAA,CAAAE,mBAAA;IACtCC,IAAA,EAAM;EACR,CAAC;EAEYT,SAAA,OAAYM,cAAA,CAAAI,MAAA,EAAON,iBAAA,CAAAO,MAAA,EAAQ;IACtCC,IAAA,EAAM;IACNC,OAAA,EAASN,WAAA;IAETO,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,KAAA,EAAO;UACLP,IAAA,EAAM;UACNQ,eAAA,EAAiB;UACjBC,QAAA,EAAU;QACZ;MACF;MAEAT,IAAA,EAAM;QACJ,WAAW,SAAAU,CAAQC,GAAA,EAAAC,KAAO;UAEtB;cAAAC;YAAA,CAAc,GAAAD,KAAO;YAAAE,kBAAe;UACtC;YAEJC,YAAA,GAAAD,kBAAA,GAAAD,MAAA,CAAAG,MAAA,CAAAL,GAAA,eAAAG,kBAAA,cAAAA,kBAAA,GAAAH;UACF;QAEA;MACE;IACF;IACDM,eAEY;MACXX,QAAM,EAAAY,OAAA,CAAAC,GAAA,CAAAC,kBAAA;IACN;EAAS,EAET;EAAA5B,UAAU,OAAAK,cAAA,CAAAI,MAAA,EAAAN,iBAAA,CAAAO,MAAA;IAAAC,IACR,cAAU;IAAAC,OACR,EAAAN,WAAO;IAAAO,QACL;MAAQC,QACR;QAAiBC,KACjB;UACFc,MAAA;UACFb,eAAA;UAEAc,YAAM;QACJ;MACS;MACyBtB,IAChC;QAEJ,oBAAAU,CAAAC,GAAA,EAAAC,KAAA;UACF;cAAAC;YAAA,IAAAD,KAAA;YAAAW,iBAAA;UAEA;YACEC,OAAU,GAAAD,iBAAY,GAAAV,MAAA,CAAAY,KAAuB,CAAAd,GAAA,eAAAY,iBAAA,cAAAA,iBAAA,GAAAZ;UAC/C;QAGW;MACX;IAEA;IAAUM,eACE;MAAAX,QACR,EAAOY,OAAA,CAAAC,GAAA,CAAAC,kBAAA;IAAA;EACG;EAAA9B,UACR,OAAAO,cAAe,CAAAI,MAAA,EAAAT,UAAA;IAAAW,IAAA,EACf,YAAW;IAAAE,QACX;MAAcC,QAChB;QACFC,KAAA;UACFc,MAAA;UAEAK,aAAiB;UACfC,SAAU,QAAQ;UACpBL,YAAA;QAGW;MACX;IAEA;IAAUL,eACE;MAAAX,QACR,EAAOY,OAAA,CAAAC,GAAA,CAAAC,kBAAA;IAAA;EACG;EAAA/B,cACR,GAAY,IAAAQ,cAAA,CAAAI,MAAA,EAAAN,iBAAA,CAAAO,MAAA;IAAAC,IAAA,EACZ,gBAAU;IAAAE,QACV;MAAeC,QACf;QACFC,KAAA;UACFc,MAAA;UACFO,UAAA;UAEAC,QAAA,UAAiB;UACfC,aAAU,EAAQ,MAAI;UACxBN,OAAA;QAOW;MACX;IACA;IACAP,eAAY;MACbX,QAAA,EAAAY,OAAA,CAAAC,GAAA,CAAAC,kBAAA","ignoreList":[]}

package/dist/cjs/index.cjs

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  },
+  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./Card.cjs"), module.exports);

package/dist/cjs/index.native.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  },
+  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./Card.native.js"), module.exports);
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","module","exports"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA","ignoreList":[]}

package/dist/esm/Card.mjs

@@ -0,0 +1,91 @@
+import { YStack } from "@hanzo/gui-stacks";
+import { createStyledContext, styled, withStaticProperties } from "@hanzo/gui-web";
+const CardContext = createStyledContext({
+    size: "$true"
+  }),
+  CardFrame = styled(YStack, {
+    name: "Card",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          size: "$true",
+          backgroundColor: "$background",
+          position: "relative"
+        }
+      },
+      size: {
+        "...size": (val, {
+          tokens
+        }) => ({
+          borderRadius: tokens.radius[val] ?? val
+        })
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardHeader = styled(YStack, {
+    name: "CardHeader",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 10,
+          backgroundColor: "transparent",
+          marginBottom: "auto"
+        }
+      },
+      size: {
+        "...size": (val, {
+          tokens
+        }) => ({
+          padding: tokens.space[val] ?? val
+        })
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardFooter = styled(CardHeader, {
+    name: "CardFooter",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 5,
+          flexDirection: "row",
+          marginTop: "auto",
+          marginBottom: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardBackground = styled(YStack, {
+    name: "CardBackground",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 0,
+          fullscreen: !0,
+          overflow: "hidden",
+          pointerEvents: "none",
+          padding: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  Card = withStaticProperties(CardFrame, {
+    Header: CardHeader,
+    Footer: CardFooter,
+    Background: CardBackground
+  });
+export { Card, CardBackground, CardFooter, CardFrame, CardHeader };
+//# sourceMappingURL=Card.mjs.map

package/dist/esm/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["YStack","createStyledContext","styled","withStaticProperties","CardContext","size","CardFrame","name","context","variants","unstyled","false","backgroundColor","position","...size","val","tokens","borderRadius","radius","defaultVariants","process","env","HANZO_GUI_HEADLESS","CardHeader","zIndex","marginBottom","padding","space","CardFooter","flexDirection","marginTop","CardBackground","fullscreen","overflow","pointerEvents","Card","Header","Footer","Background"],"sources":["../../src/Card.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AAEvB,SAASC,mBAAA,EAAqBC,MAAA,EAAQC,oBAAA,QAA4B;AAElE,MAAMC,WAAA,GAAcH,mBAAA,CAAoB;IACtCI,IAAA,EAAM;EACR,CAAC;EAEYC,SAAA,GAAYJ,MAAA,CAAOF,MAAA,EAAQ;IACtCO,IAAA,EAAM;IACNC,OAAA,EAASJ,WAAA;IAETK,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,KAAA,EAAO;UACLN,IAAA,EAAM;UACNO,eAAA,EAAiB;UACjBC,QAAA,EAAU;QACZ;MACF;MAEAR,IAAA,EAAM;QACJ,WAAWS,CAACC,GAAA,EAAK;UAAEC;QAAO,OACjB;UACLC,YAAA,EAAcD,MAAA,CAAOE,MAAA,CAAOH,GAAG,KAAKA;QACtC;MAEJ;IACF;IAEAI,eAAA,EAAiB;MACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,kBAAA,KAAuB;IAC/C;EACF,CAAC;EAEYC,UAAA,GAAarB,MAAA,CAAOF,MAAA,EAAQ;IACvCO,IAAA,EAAM;IACNC,OAAA,EAASJ,WAAA;IAETK,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,KAAA,EAAO;UACLa,MAAA,EAAQ;UACRZ,eAAA,EAAiB;UACjBa,YAAA,EAAc;QAChB;MACF;MAEApB,IAAA,EAAM;QACJ,WAAWS,CAACC,GAAA,EAAK;UAAEC;QAAO,OACjB;UACLU,OAAA,EAASV,MAAA,CAAOW,KAAA,CAAMZ,GAAG,KAAKA;QAChC;MAEJ;IACF;IAEAI,eAAA,EAAiB;MACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,kBAAA,KAAuB;IAC/C;EACF,CAAC;EAEYM,UAAA,GAAa1B,MAAA,CAAOqB,UAAA,EAAY;IAC3ChB,IAAA,EAAM;IAENE,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,KAAA,EAAO;UACLa,MAAA,EAAQ;UACRK,aAAA,EAAe;UACfC,SAAA,EAAW;UACXL,YAAA,EAAc;QAChB;MACF;IACF;IAEAN,eAAA,EAAiB;MACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,kBAAA,KAAuB;IAC/C;EACF,CAAC;EAEYS,cAAA,GAAiB7B,MAAA,CAAOF,MAAA,EAAQ;IAC3CO,IAAA,EAAM;IAENE,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,KAAA,EAAO;UACLa,MAAA,EAAQ;UACRQ,UAAA,EAAY;UACZC,QAAA,EAAU;UACVC,aAAA,EAAe;UACfR,OAAA,EAAS;QACX;MACF;IACF;IAEAP,eAAA,EAAiB;MACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,kBAAA,KAAuB;IAC/C;EACF,CAAC;EAMYa,IAAA,GAAOhC,oBAAA,CAAqBG,SAAA,EAAW;IAClD8B,MAAA,EAAQb,UAAA;IACRc,MAAA,EAAQT,UAAA;IACRU,UAAA,EAAYP;EACd,CAAC","ignoreList":[]}

package/dist/esm/Card.native.js

@@ -0,0 +1,99 @@
+import { YStack } from "@hanzo/gui-stacks";
+import { createStyledContext, styled, withStaticProperties } from "@hanzo/gui-web";
+var CardContext = createStyledContext({
+    size: "$true"
+  }),
+  CardFrame = styled(YStack, {
+    name: "Card",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          size: "$true",
+          backgroundColor: "$background",
+          position: "relative"
+        }
+      },
+      size: {
+        "...size": function (val, param) {
+          var {
+              tokens
+            } = param,
+            _tokens_radius_val;
+          return {
+            borderRadius: (_tokens_radius_val = tokens.radius[val]) !== null && _tokens_radius_val !== void 0 ? _tokens_radius_val : val
+          };
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardHeader = styled(YStack, {
+    name: "CardHeader",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 10,
+          backgroundColor: "transparent",
+          marginBottom: "auto"
+        }
+      },
+      size: {
+        "...size": function (val, param) {
+          var {
+              tokens
+            } = param,
+            _tokens_space_val;
+          return {
+            padding: (_tokens_space_val = tokens.space[val]) !== null && _tokens_space_val !== void 0 ? _tokens_space_val : val
+          };
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardFooter = styled(CardHeader, {
+    name: "CardFooter",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 5,
+          flexDirection: "row",
+          marginTop: "auto",
+          marginBottom: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardBackground = styled(YStack, {
+    name: "CardBackground",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 0,
+          fullscreen: !0,
+          overflow: "hidden",
+          pointerEvents: "none",
+          padding: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  Card = withStaticProperties(CardFrame, {
+    Header: CardHeader,
+    Footer: CardFooter,
+    Background: CardBackground
+  });
+export { Card, CardBackground, CardFooter, CardFrame, CardHeader };
+//# sourceMappingURL=Card.native.js.map

package/dist/esm/Card.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["YStack","createStyledContext","styled","withStaticProperties","CardContext","size","CardFrame","name","context","variants","unstyled","false","backgroundColor","position","...size","val","param","tokens","_tokens_radius_val","borderRadius","radius","defaultVariants","process","env","HANZO_GUI_HEADLESS","CardHeader","zIndex","marginBottom","_tokens_space_val","padding","space","CardFooter","flexDirection","marginTop","CardBackground","fullscreen","overflow","pointerEvents"],"sources":["../../src/Card.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AAEvB,SAASC,mBAAA,EAAqBC,MAAA,EAAQC,oBAAA,QAA4B;AAElE,IAAAC,WAAM,GAAAH,mBAAc;IAClBI,IAAA,EAAM;EACR,CAAC;EAEYC,SAAA,GAAYJ,MAAA,CAAOF,MAAA,EAAQ;IACtCO,IAAA,EAAM;IACNC,OAAA,EAASJ,WAAA;IAETK,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,KAAA,EAAO;UACLN,IAAA,EAAM;UACNO,eAAA,EAAiB;UACjBC,QAAA,EAAU;QACZ;MACF;MAEAR,IAAA,EAAM;QACJ,WAAW,SAAAS,CAAQC,GAAA,EAAAC,KAAO;UAEtB;cAAAC;YAAA,CAAc,GAAAD,KAAO;YAAAE,kBAAe;UACtC;YAEJC,YAAA,GAAAD,kBAAA,GAAAD,MAAA,CAAAG,MAAA,CAAAL,GAAA,eAAAG,kBAAA,cAAAA,kBAAA,GAAAH;UACF;QAEA;MACE;IACF;IACDM,eAEyB;MACxBX,QAAM,EAAAY,OAAA,CAAAC,GAAA,CAAAC,kBAAA;IACN;EAAS,EAET;EAAAC,UAAU,GAAAvB,MAAA,CAAAF,MAAA;IAAAO,IACR,cAAU;IAAAC,OACR,EAAAJ,WAAO;IAAAK,QACL;MAAQC,QACR;QAAiBC,KACjB;UACFe,MAAA;UACFd,eAAA;UAEAe,YAAM;QACJ;MACS;MACyBtB,IAChC;QAEJ,oBAAAS,CAAAC,GAAA,EAAAC,KAAA;UACF;cAAAC;YAAA,IAAAD,KAAA;YAAAY,iBAAA;UAEA;YACEC,OAAU,GAAAD,iBAAY,GAAAX,MAAA,CAAAa,KAAuB,CAAAf,GAAA,eAAAa,iBAAA,cAAAA,iBAAA,GAAAb;UAC/C;QAGW;MACX;IAEA;IAAUM,eACE;MAAAX,QACR,EAAOY,OAAA,CAAAC,GAAA,CAAAC,kBAAA;IAAA;EACG;EAAAO,UACR,GAAA7B,MAAe,CAAAuB,UAAA;IAAAlB,IAAA,EACf,YAAW;IAAAE,QACX;MAAcC,QAChB;QACFC,KAAA;UACFe,MAAA;UAEAM,aAAiB;UACfC,SAAU,QAAQ;UACpBN,YAAA;QAGW;MACX;IAEA;IAAUN,eACE;MAAAX,QACR,EAAOY,OAAA,CAAAC,GAAA,CAAAC,kBAAA;IAAA;EACG;EAAAU,cACR,GAAYhC,MAAA,CAAAF,MAAA;IAAAO,IAAA,EACZ,gBAAU;IAAAE,QACV;MAAeC,QACf;QACFC,KAAA;UACFe,MAAA;UACFS,UAAA;UAEAC,QAAA,UAAiB;UACfC,aAAU,EAAQ,MAAI;UACxBR,OAAA;QAOW;MACX;IACA;IACAR,eAAY;MACbX,QAAA,EAAAY,OAAA,CAAAC,GAAA,CAAAC,kBAAA","ignoreList":[]}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./Card.mjs";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/esm/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Card.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/esm/index.native.js

@@ -0,0 +1,2 @@
+export * from "./Card.native.js";
+//# sourceMappingURL=index.native.js.map

package/dist/esm/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/Card.mjs

@@ -0,0 +1,91 @@
+import { YStack } from "@hanzo/gui-stacks";
+import { createStyledContext, styled, withStaticProperties } from "@hanzo/gui-web";
+const CardContext = createStyledContext({
+    size: "$true"
+  }),
+  CardFrame = styled(YStack, {
+    name: "Card",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          size: "$true",
+          backgroundColor: "$background",
+          position: "relative"
+        }
+      },
+      size: {
+        "...size": (val, {
+          tokens
+        }) => ({
+          borderRadius: tokens.radius[val] ?? val
+        })
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardHeader = styled(YStack, {
+    name: "CardHeader",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 10,
+          backgroundColor: "transparent",
+          marginBottom: "auto"
+        }
+      },
+      size: {
+        "...size": (val, {
+          tokens
+        }) => ({
+          padding: tokens.space[val] ?? val
+        })
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardFooter = styled(CardHeader, {
+    name: "CardFooter",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 5,
+          flexDirection: "row",
+          marginTop: "auto",
+          marginBottom: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardBackground = styled(YStack, {
+    name: "CardBackground",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 0,
+          fullscreen: !0,
+          overflow: "hidden",
+          pointerEvents: "none",
+          padding: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  Card = withStaticProperties(CardFrame, {
+    Header: CardHeader,
+    Footer: CardFooter,
+    Background: CardBackground
+  });
+export { Card, CardBackground, CardFooter, CardFrame, CardHeader };
+//# sourceMappingURL=Card.mjs.map

package/dist/jsx/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["YStack","createStyledContext","styled","withStaticProperties","CardContext","size","CardFrame","name","context","variants","unstyled","false","backgroundColor","position","...size","val","tokens","borderRadius","radius","defaultVariants","process","env","HANZO_GUI_HEADLESS","CardHeader","zIndex","marginBottom","padding","space","CardFooter","flexDirection","marginTop","CardBackground","fullscreen","overflow","pointerEvents","Card","Header","Footer","Background"],"sources":["../../src/Card.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,QAAc;AAEvB,SAASC,mBAAA,EAAqBC,MAAA,EAAQC,oBAAA,QAA4B;AAElE,MAAMC,WAAA,GAAcH,mBAAA,CAAoB;IACtCI,IAAA,EAAM;EACR,CAAC;EAEYC,SAAA,GAAYJ,MAAA,CAAOF,MAAA,EAAQ;IACtCO,IAAA,EAAM;IACNC,OAAA,EAASJ,WAAA;IAETK,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,KAAA,EAAO;UACLN,IAAA,EAAM;UACNO,eAAA,EAAiB;UACjBC,QAAA,EAAU;QACZ;MACF;MAEAR,IAAA,EAAM;QACJ,WAAWS,CAACC,GAAA,EAAK;UAAEC;QAAO,OACjB;UACLC,YAAA,EAAcD,MAAA,CAAOE,MAAA,CAAOH,GAAG,KAAKA;QACtC;MAEJ;IACF;IAEAI,eAAA,EAAiB;MACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,kBAAA,KAAuB;IAC/C;EACF,CAAC;EAEYC,UAAA,GAAarB,MAAA,CAAOF,MAAA,EAAQ;IACvCO,IAAA,EAAM;IACNC,OAAA,EAASJ,WAAA;IAETK,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,KAAA,EAAO;UACLa,MAAA,EAAQ;UACRZ,eAAA,EAAiB;UACjBa,YAAA,EAAc;QAChB;MACF;MAEApB,IAAA,EAAM;QACJ,WAAWS,CAACC,GAAA,EAAK;UAAEC;QAAO,OACjB;UACLU,OAAA,EAASV,MAAA,CAAOW,KAAA,CAAMZ,GAAG,KAAKA;QAChC;MAEJ;IACF;IAEAI,eAAA,EAAiB;MACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,kBAAA,KAAuB;IAC/C;EACF,CAAC;EAEYM,UAAA,GAAa1B,MAAA,CAAOqB,UAAA,EAAY;IAC3ChB,IAAA,EAAM;IAENE,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,KAAA,EAAO;UACLa,MAAA,EAAQ;UACRK,aAAA,EAAe;UACfC,SAAA,EAAW;UACXL,YAAA,EAAc;QAChB;MACF;IACF;IAEAN,eAAA,EAAiB;MACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,kBAAA,KAAuB;IAC/C;EACF,CAAC;EAEYS,cAAA,GAAiB7B,MAAA,CAAOF,MAAA,EAAQ;IAC3CO,IAAA,EAAM;IAENE,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,KAAA,EAAO;UACLa,MAAA,EAAQ;UACRQ,UAAA,EAAY;UACZC,QAAA,EAAU;UACVC,aAAA,EAAe;UACfR,OAAA,EAAS;QACX;MACF;IACF;IAEAP,eAAA,EAAiB;MACfT,QAAA,EAAUU,OAAA,CAAQC,GAAA,CAAIC,kBAAA,KAAuB;IAC/C;EACF,CAAC;EAMYa,IAAA,GAAOhC,oBAAA,CAAqBG,SAAA,EAAW;IAClD8B,MAAA,EAAQb,UAAA;IACRc,MAAA,EAAQT,UAAA;IACRU,UAAA,EAAYP;EACd,CAAC","ignoreList":[]}

package/dist/jsx/Card.native.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var Card_exports = {};
+__export(Card_exports, {
+  Card: () => Card,
+  CardBackground: () => CardBackground,
+  CardFooter: () => CardFooter,
+  CardFrame: () => CardFrame,
+  CardHeader: () => CardHeader
+});
+module.exports = __toCommonJS(Card_exports);
+var import_gui_stacks = require("@hanzo/gui-stacks"),
+  import_gui_web = require("@hanzo/gui-web"),
+  CardContext = (0, import_gui_web.createStyledContext)({
+    size: "$true"
+  }),
+  CardFrame = (0, import_gui_web.styled)(import_gui_stacks.YStack, {
+    name: "Card",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          size: "$true",
+          backgroundColor: "$background",
+          position: "relative"
+        }
+      },
+      size: {
+        "...size": function (val, param) {
+          var {
+              tokens
+            } = param,
+            _tokens_radius_val;
+          return {
+            borderRadius: (_tokens_radius_val = tokens.radius[val]) !== null && _tokens_radius_val !== void 0 ? _tokens_radius_val : val
+          };
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardHeader = (0, import_gui_web.styled)(import_gui_stacks.YStack, {
+    name: "CardHeader",
+    context: CardContext,
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 10,
+          backgroundColor: "transparent",
+          marginBottom: "auto"
+        }
+      },
+      size: {
+        "...size": function (val, param) {
+          var {
+              tokens
+            } = param,
+            _tokens_space_val;
+          return {
+            padding: (_tokens_space_val = tokens.space[val]) !== null && _tokens_space_val !== void 0 ? _tokens_space_val : val
+          };
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardFooter = (0, import_gui_web.styled)(CardHeader, {
+    name: "CardFooter",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 5,
+          flexDirection: "row",
+          marginTop: "auto",
+          marginBottom: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  CardBackground = (0, import_gui_web.styled)(import_gui_stacks.YStack, {
+    name: "CardBackground",
+    variants: {
+      unstyled: {
+        false: {
+          zIndex: 0,
+          fullscreen: !0,
+          overflow: "hidden",
+          pointerEvents: "none",
+          padding: 0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  Card = (0, import_gui_web.withStaticProperties)(CardFrame, {
+    Header: CardHeader,
+    Footer: CardFooter,
+    Background: CardBackground
+  });
+//# sourceMappingURL=Card.native.js.map

package/dist/jsx/Card.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","Card_exports","Card","CardBackground","CardFooter","CardFrame","CardHeader","module","exports","import_gui_stacks","require","import_gui_web","CardContext","createStyledContext","size","styled","YStack","context","variants","unstyled","false","backgroundColor","position","...size","val","param","tokens","_tokens_radius_val","borderRadius","radius","defaultVariants","process","env","HANZO_GUI_HEADLESS","zIndex","marginBottom","_tokens_space_val","padding","space","flexDirection","marginTop"],"sources":["../../src/Card.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/index.js

@@ -0,0 +1,2 @@
+export * from "./Card.mjs";
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Card.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/index.native.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  },
+  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./Card.native.js"), module.exports);
+//# sourceMappingURL=index.native.js.map

package/dist/jsx/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA","ignoreList":[]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@hanzogui/card",
+  "version": "2.0.0",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzo-gui-build",
+    "watch": "hanzo-gui-build --watch",
+    "clean": "hanzo-gui-build clean",
+    "clean:build": "hanzo-gui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/create-context": "2.0.0-rc.29",
+    "@hanzogui/helpers": "2.0.0-rc.29",
+    "@hanzogui/stacks": "2.0.0",
+    "@hanzogui/web": "2.0.0-rc.29"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "2.0.0-rc.29",
+    "react": ">=19",
+    "react-native": "0.83.2"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": "*"
+  },
+  "module:jsx": "dist/jsx"
+}

package/src/Card.tsx

@@ -0,0 +1,110 @@
+import { YStack } from '@hanzogui/stacks'
+import type { GetProps, SizeTokens } from '@hanzogui/web'
+import { createStyledContext, styled, withStaticProperties } from '@hanzogui/web'
+
+const CardContext = createStyledContext({
+  size: '$true' as SizeTokens,
+})
+
+export const CardFrame = styled(YStack, {
+  name: 'Card',
+  context: CardContext,
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$true',
+        backgroundColor: '$background',
+        position: 'relative',
+      },
+    },
+
+    size: {
+      '...size': (val, { tokens }) => {
+        return {
+          borderRadius: tokens.radius[val] ?? val,
+        }
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+export const CardHeader = styled(YStack, {
+  name: 'CardHeader',
+  context: CardContext,
+
+  variants: {
+    unstyled: {
+      false: {
+        zIndex: 10,
+        backgroundColor: 'transparent',
+        marginBottom: 'auto',
+      },
+    },
+
+    size: {
+      '...size': (val, { tokens }) => {
+        return {
+          padding: tokens.space[val] ?? val,
+        }
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+export const CardFooter = styled(CardHeader, {
+  name: 'CardFooter',
+
+  variants: {
+    unstyled: {
+      false: {
+        zIndex: 5,
+        flexDirection: 'row',
+        marginTop: 'auto',
+        marginBottom: 0,
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+export const CardBackground = styled(YStack, {
+  name: 'CardBackground',
+
+  variants: {
+    unstyled: {
+      false: {
+        zIndex: 0,
+        fullscreen: true,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        padding: 0,
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+export type CardHeaderProps = GetProps<typeof CardHeader>
+export type CardFooterProps = GetProps<typeof CardFooter>
+export type CardProps = GetProps<typeof CardFrame>
+
+export const Card = withStaticProperties(CardFrame, {
+  Header: CardHeader,
+  Footer: CardFooter,
+  Background: CardBackground,
+})

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Card'

package/types/Card.d.ts

@@ -0,0 +1,74 @@
+import type { GetProps, SizeTokens } from '@gui/web';
+export declare const CardFrame: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/web").StackStyleBase, {
+    size?: SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export declare const CardHeader: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/web").StackStyleBase, {
+    size?: SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export declare const CardFooter: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/web").StackStyleBase, {
+    size?: SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export declare const CardBackground: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/web").StackStyleBase, {
+    unstyled?: boolean | undefined;
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/web").StaticConfigPublic>;
+export type CardHeaderProps = GetProps<typeof CardHeader>;
+export type CardFooterProps = GetProps<typeof CardFooter>;
+export type CardProps = GetProps<typeof CardFrame>;
+export declare const Card: import("react").ForwardRefExoticComponent<Omit<import("@gui/core").RNGuiViewNonStyleProps, "size" | "unstyled" | "elevation" | keyof import("@gui/web").StackStyleBase | "fullscreen"> & import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase> & {
+    size?: SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+} & import("@gui/web").WithShorthands<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase>> & import("@gui/web").WithPseudoProps<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase> & {
+    size?: SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+} & import("@gui/web").WithShorthands<import("@gui/web").WithThemeValues<import("@gui/web").StackStyleBase>>> & import("@gui/web").WithMediaProps<import("@gui/web").WithThemeShorthandsAndPseudos<import("@gui/web").StackStyleBase, {
+    size?: SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}>> & import("react").RefAttributes<import("@gui/web").GuiElement>> & import("@gui/web").StaticComponentObject<import("@gui/web").TamaDefer, import("@gui/web").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/web").StackStyleBase, {
+    size?: SizeTokens | undefined;
+    unstyled?: boolean | undefined;
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@gui/web").StaticConfigPublic> & Omit<import("@gui/web").StaticConfigPublic, "staticConfig" | "styleable"> & {
+    __tama: [import("@gui/web").TamaDefer, import("@gui/web").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/web").StackStyleBase, {
+        size?: SizeTokens | undefined;
+        unstyled?: boolean | undefined;
+        elevation?: number | SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }, import("@gui/web").StaticConfigPublic];
+} & {
+    Header: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/web").StackStyleBase, {
+        size?: SizeTokens | undefined;
+        unstyled?: boolean | undefined;
+        elevation?: number | SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }, import("@gui/web").StaticConfigPublic>;
+    Footer: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/web").StackStyleBase, {
+        size?: SizeTokens | undefined;
+        unstyled?: boolean | undefined;
+        elevation?: number | SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }, import("@gui/web").StaticConfigPublic>;
+    Background: import("@gui/web").GuiComponent<import("@gui/web").TamaDefer, import("@gui/web").GuiElement, import("@gui/core").RNGuiViewNonStyleProps, import("@gui/web").StackStyleBase, {
+        unstyled?: boolean | undefined;
+        elevation?: number | SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }, import("@gui/web").StaticConfigPublic>;
+};
+//# sourceMappingURL=Card.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Card';
+//# sourceMappingURL=index.d.ts.map