@multiplatform.one/frappe-ui 6.0.0

package/dist/cjs/fields/Heading/Heading.stories.cjs

@@ -0,0 +1,183 @@
+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: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__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: true
+}), mod);
+var Heading_stories_exports = {};
+__export(Heading_stories_exports, {
+  Collapsible: () => Collapsible,
+  Default: () => Default,
+  FormWithSections: () => FormWithSections,
+  default: () => Heading_stories_default
+});
+module.exports = __toCommonJS(Heading_stories_exports);
+var import_storybook = require("@multiplatform.one/storybook");
+var import_tamagui = require("tamagui");
+var import__ = require("./index.cjs");
+var import_Data = require("../Data/index.cjs");
+var import_Check = require("../Check/index.cjs");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Heading_stories_default = {
+  title: "FrappeUI/Heading",
+  component: import__.Heading,
+  parameters: {
+    status: {
+      type: "stable"
+    },
+    docs: {
+      description: {
+        component: "A section heading component for organizing form fields with optional collapsible sections."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Heading text"
+    },
+    description: {
+      control: "text",
+      description: "Optional description text"
+    },
+    level: {
+      control: "select",
+      options: [1, 2, 3, 4],
+      description: "Heading level (H1-H4)"
+    },
+    collapsible: {
+      control: "boolean",
+      description: "Allow section to collapse"
+    },
+    defaultCollapsed: {
+      control: "boolean",
+      description: "Start collapsed"
+    },
+    showSeparator: {
+      control: "boolean",
+      description: "Show separator line"
+    }
+  }
+};
+const Default = args => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.Heading, {
+  ...args
+});
+Default.args = {
+  label: "General Information",
+  level: 2
+};
+Default.storyName = "Main";
+const Collapsible = () => {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    gap: "$4",
+    width: 500,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.Heading, {
+      label: "Personal Information",
+      description: "Click to expand/collapse",
+      level: 2,
+      collapsible: true,
+      onCollapseChange: (0, import_storybook.action)("onCollapseChange"),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: "$gray11",
+          children: "This content is inside the collapsible section."
+        })
+      })
+    })
+  });
+};
+Collapsible.parameters = {
+  docs: {
+    description: {
+      story: "Collapsible sections can be toggled by clicking the heading."
+    }
+  }
+};
+const FormWithSections = () => {
+  const [firstName, setFirstName] = (0, import_react.useState)("");
+  const [lastName, setLastName] = (0, import_react.useState)("");
+  const [email, setEmail] = (0, import_react.useState)("");
+  const [newsletter, setNewsletter] = (0, import_react.useState)(false);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$4",
+    width: 500,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.Heading, {
+      label: "Personal Information",
+      level: 2,
+      showSeparator: true,
+      collapsible: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Data.Data, {
+          label: "First Name",
+          value: firstName,
+          onChange: v => setFirstName(v),
+          required: true
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Data.Data, {
+          label: "Last Name",
+          value: lastName,
+          onChange: v => setLastName(v),
+          required: true
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.Heading, {
+      label: "Contact Information",
+      level: 2,
+      showSeparator: true,
+      collapsible: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Data.Data, {
+          label: "Email",
+          value: email,
+          onChange: v => setEmail(v),
+          required: true
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.Heading, {
+      label: "Preferences",
+      description: "Optional settings",
+      level: 2,
+      showSeparator: true,
+      collapsible: true,
+      defaultCollapsed: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Check.Check, {
+          label: "Subscribe to newsletter",
+          value: newsletter,
+          onChange: v => setNewsletter(v)
+        })
+      })
+    })]
+  });
+};
+FormWithSections.parameters = {
+  docs: {
+    description: {
+      story: "Real-world example of using Heading to organize a form into collapsible sections."
+    }
+  }
+};

package/dist/cjs/fields/Heading/Heading.stories.native.js

@@ -0,0 +1,196 @@
+"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: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__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: true
+}), mod);
+var Heading_stories_exports = {};
+__export(Heading_stories_exports, {
+  Collapsible: () => Collapsible,
+  Default: () => Default,
+  FormWithSections: () => FormWithSections,
+  default: () => Heading_stories_default
+});
+module.exports = __toCommonJS(Heading_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_storybook = require("@multiplatform.one/storybook");
+var import_tamagui = require("tamagui");
+var import__ = require("./index.native.js");
+var import_Data = require("../Data/index.native.js");
+var import_Check = require("../Check/index.native.js");
+var import_react = require("react");
+var Heading_stories_default = {
+  title: "FrappeUI/Heading",
+  component: import__.Heading,
+  parameters: {
+    status: {
+      type: "stable"
+    },
+    docs: {
+      description: {
+        component: "A section heading component for organizing form fields with optional collapsible sections."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Heading text"
+    },
+    description: {
+      control: "text",
+      description: "Optional description text"
+    },
+    level: {
+      control: "select",
+      options: [1, 2, 3, 4],
+      description: "Heading level (H1-H4)"
+    },
+    collapsible: {
+      control: "boolean",
+      description: "Allow section to collapse"
+    },
+    defaultCollapsed: {
+      control: "boolean",
+      description: "Start collapsed"
+    },
+    showSeparator: {
+      control: "boolean",
+      description: "Show separator line"
+    }
+  }
+};
+var Default = function Default2(args) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.Heading, {
+    ...args
+  });
+};
+Default.args = {
+  label: "General Information",
+  level: 2
+};
+Default.storyName = "Main";
+var Collapsible = function Collapsible2() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    gap: "$4",
+    width: 500,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.Heading, {
+      label: "Personal Information",
+      description: "Click to expand/collapse",
+      level: 2,
+      collapsible: true,
+      onCollapseChange: (0, import_storybook.action)("onCollapseChange"),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: "$gray11",
+          children: "This content is inside the collapsible section."
+        })
+      })
+    })
+  });
+};
+Collapsible.parameters = {
+  docs: {
+    description: {
+      story: "Collapsible sections can be toggled by clicking the heading."
+    }
+  }
+};
+var FormWithSections = function FormWithSections2() {
+  var [firstName, setFirstName] = (0, import_react.useState)("");
+  var [lastName, setLastName] = (0, import_react.useState)("");
+  var [email, setEmail] = (0, import_react.useState)("");
+  var [newsletter, setNewsletter] = (0, import_react.useState)(false);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$4",
+    width: 500,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.Heading, {
+      label: "Personal Information",
+      level: 2,
+      showSeparator: true,
+      collapsible: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Data.Data, {
+          label: "First Name",
+          value: firstName,
+          onChange: function onChange(v) {
+            return setFirstName(v);
+          },
+          required: true
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Data.Data, {
+          label: "Last Name",
+          value: lastName,
+          onChange: function onChange(v) {
+            return setLastName(v);
+          },
+          required: true
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.Heading, {
+      label: "Contact Information",
+      level: 2,
+      showSeparator: true,
+      collapsible: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Data.Data, {
+          label: "Email",
+          value: email,
+          onChange: function onChange(v) {
+            return setEmail(v);
+          },
+          required: true
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.Heading, {
+      label: "Preferences",
+      description: "Optional settings",
+      level: 2,
+      showSeparator: true,
+      collapsible: true,
+      defaultCollapsed: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Check.Check, {
+          label: "Subscribe to newsletter",
+          value: newsletter,
+          onChange: function onChange(v) {
+            return setNewsletter(v);
+          }
+        })
+      })
+    })]
+  });
+};
+FormWithSections.parameters = {
+  docs: {
+    description: {
+      story: "Real-world example of using Heading to organize a form into collapsible sections."
+    }
+  }
+};
+//# sourceMappingURL=Heading.stories.native.js.map

package/dist/cjs/fields/Heading/Heading.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Heading_stories_exports","__export","Collapsible","Default","FormWithSections","default","Heading_stories_default","module","exports","import_jsx_runtime","require","import_storybook","import_tamagui","import__","import_Data","import_Check","import_react","title","component","Heading","parameters","status","type","docs","description","argTypes","label","control","level","options","collapsible","defaultCollapsed","showSeparator","Default2","args","jsx","storyName","Collapsible2","YStack","gap","width","children","onCollapseChange","action","paddingTop","Text","color","story","FormWithSections2","firstName","setFirstName","useState","lastName","setLastName","email","setEmail"],"sources":["../../../../src/fields/Heading/Heading.stories.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,uBAAA;AAAAC,QAAA,CAAAD,uBAAA;EAAAE,WAAA,EAAAA,CAAA,KAAAA,WAAA;EAAAC,OAAA,EAAAA,CAAA,KAAAA,OAAA;EAAAC,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,OAAA,EAAAA,CAAA,KAAAC;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAb,YAAuB,CAAAK,uBAAA;AACvB,IAAAS,kBAA6B,GAAAC,OAAA;AAC7B,IAAAC,gBAA2C,GAAAD,OAAA;AAC3C,IAAAE,cAAqB,GAAAF,OAAA;AACrB,IAAAG,QAAA,GAAAH,OAAsB;AACtB,IAAAI,WAAA,GAAAJ,OAAyB;AA4BsB,IAAAK,YAAA,GAAAL,OAAA;AA1B/C,IAAOM,YAAA,GAAAN,OAAA,QAAQ;AAAA,IACbJ,uBAAO;EACPW,KAAA,oBAAW;EACXC,SAAA,EAAAL,QAAY,CAAAM,OAAA;EAAAC,UACF,EAAE;IACVC,MAAM;MACJC,IAAA;IAAa;IAETC,IACJ;MACFC,WAAA;QACFN,SAAA;MACA;IACE;EAAsD;EACmBO,QACzE,EAAO;IAAAC,KACL;MACAC,OAAA,EAAS,MAAI;MACbH,WAAA,EAAa;IACf;IACAA,WAAA,EAAa;MACbG,OAAA;MACAH,WAAA,EAAe;IACjB;IACFI,KAAA;MAEaD,OAAA,UAAW;MACxBE,OAAQ,EAAO,CACb,CAAO,EACP,CAAO,EACT,GAEQ,EACK;MACXL,WACE;IACG;IAAAM,WAAA;MACCH,OAAM;MACNH,WAAA,EAAY;IAAA;IACLO,gBACI;MACXJ,OAAA;MAEAH,WAAA;IAEA;IACFQ,aACF;MAEJL,OAAA;MACAH,WAAY;IACV;EAAM;AACS;AACJ,IACTrB,OAAA,YAAA8B,SAAAC,IAAA;EACF,0BAAAzB,kBAAA,CAAA0B,GAAA,EAAAtB,QAAA,CAAAM,OAAA;IACF,GAAAe;EAEO;AACL;AACA/B,OAAA,CAAM+B,IAAC;EACPR,KAAA,EAAO,qBAAe;EACtBE,KAAA,EAAO;AAEP;AAEIzB,OAAA,CAAAiC,SAAA;AAEI,IAAAlC,WAAA,YAAAmC,aAAA;EAAsF,OACtF,mBAAA5B,kBAAA,CAAA0B,GAAC,EAAAvB,cAAA,CAAA0B,MAAK;IAA6EC,GACrF,MACF;IAEAC,KAAA;IAMAC,QAAA,qBAAAhC,kBAAA,CAAA0B,GAAA,EAAAtB,QAAA,CAAAM,OAAA;MAACO,KAAA;MAAAF,WAAA;MAAAI,KACC;MAAME,WACN,MAAY;MAAAY,gBACL,MAAA/B,gBAAA,CAAAgC,MAAA;MAAAF,QACP,iBAAa,IAAAhC,kBAAA,CAAA0B,GAAA,EAAAvB,cAAA,CAAA0B,MAAA;QACbC,GAAA;QACAK,UAAA;QAEAH,QAAA,qBAAAhC,kBAAA,CAAA0B,GAAA,EAACvB,cAAA,CAAAiC,IAAA;UACEC,KAAA;UAAAL,QAAA;QAAA;MACO;IACC;EACyB;AAAA;AAEpCvC,WAAA,CAAAkB,UAAA;EAAAG,IACF;IAAAC,WACF;MAEJuB,KAAA;IACA;EACE;AAAM;AACS,IAAA3C,gBACJ,YAAA4C,kBAAA;EAAA,IACT,CAAAC,SAAA,EAAAC,YAAA,QAAAlC,YAAA,CAAAmC,QAAA;EACF,KAAAC,QAAA,EAAAC,WAAA,QAAArC,YAAA,CAAAmC,QAAA;EACF,KAAAG,KAAA,EAAAC,QAAA,QAAAvC,YAAA,CAAAmC,QAAA","ignoreList":[]}

package/dist/cjs/fields/Heading/index.cjs

@@ -0,0 +1,112 @@
+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: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__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: true
+}), mod);
+var Heading_exports = {};
+__export(Heading_exports, {
+  Heading: () => Heading
+});
+module.exports = __toCommonJS(Heading_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ChevronIcon({
+  collapsed
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    fontSize: "$3",
+    color: "$color10",
+    "aria-hidden": true,
+    children: collapsed ? "\u25B6" : "\u25BC"
+  });
+}
+function Heading({
+  label,
+  description,
+  level = 2,
+  collapsible = false,
+  defaultCollapsed = false,
+  showSeparator = true,
+  children,
+  onCollapseChange,
+  ...stackProps
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [isCollapsed, setIsCollapsed] = (0, import_react.useState)(defaultCollapsed);
+  const handleToggle = (0, import_react.useCallback)(() => {
+    if (!collapsible) return;
+    const newState = !isCollapsed;
+    setIsCollapsed(newState);
+    onCollapseChange?.(newState);
+  }, [collapsible, isCollapsed, onCollapseChange]);
+  const HeadingComponent = {
+    1: import_tamagui.H1,
+    2: import_tamagui.H2,
+    3: import_tamagui.H3,
+    4: import_tamagui.H4
+  }[level];
+  const headingContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    gap: "$2",
+    cursor: collapsible ? "pointer" : "default",
+    onPress: handleToggle,
+    paddingVertical: "$2",
+    hoverStyle: collapsible ? {
+      opacity: 0.8
+    } : void 0,
+    role: collapsible ? "button" : void 0,
+    "aria-expanded": collapsible ? !isCollapsed : void 0,
+    "aria-controls": collapsible ? `section-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0,
+    children: [collapsible && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChevronIcon, {
+      collapsed: isCollapsed
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingComponent, {
+      ...knobProps.heading,
+      size: level === 1 ? "$8" : level === 2 ? "$6" : level === 3 ? "$5" : "$4",
+      fontWeight: "600",
+      color: "$color",
+      children: label
+    })]
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: [headingContent, description && !isCollapsed && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: knobProps.sizeToken,
+      ...knobProps.body,
+      color: "$color10",
+      marginTop: "$-1",
+      marginBottom: "$1",
+      paddingLeft: collapsible ? "$6" : void 0,
+      children: description
+    }), showSeparator && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+      marginVertical: "$1",
+      backgroundColor: "$color5"
+    }), children && !isCollapsed && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      id: collapsible ? `section-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0,
+      ...knobProps.gap,
+      paddingLeft: collapsible ? "$4" : void 0,
+      children
+    })]
+  });
+}

package/dist/cjs/fields/Heading/index.native.js

@@ -0,0 +1,117 @@
+"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: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__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: true
+}), mod);
+var Heading_exports = {};
+__export(Heading_exports, {
+  Heading: () => Heading
+});
+module.exports = __toCommonJS(Heading_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+function ChevronIcon(param) {
+  var {
+    collapsed
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    fontSize: "$3",
+    color: "$color10",
+    "aria-hidden": true,
+    children: collapsed ? "\u25B6" : "\u25BC"
+  });
+}
+function Heading(param) {
+  var {
+    label,
+    description,
+    level = 2,
+    collapsible = false,
+    defaultCollapsed = false,
+    showSeparator = true,
+    children,
+    onCollapseChange,
+    ...stackProps
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [isCollapsed, setIsCollapsed] = (0, import_react.useState)(defaultCollapsed);
+  var handleToggle = (0, import_react.useCallback)(function () {
+    if (!collapsible) return;
+    var newState = !isCollapsed;
+    setIsCollapsed(newState);
+    onCollapseChange === null || onCollapseChange === void 0 ? void 0 : onCollapseChange(newState);
+  }, [collapsible, isCollapsed, onCollapseChange]);
+  var HeadingComponent = {
+    1: import_tamagui.H1,
+    2: import_tamagui.H2,
+    3: import_tamagui.H3,
+    4: import_tamagui.H4
+  }[level];
+  var headingContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    gap: "$2",
+    cursor: collapsible ? "pointer" : "default",
+    onPress: handleToggle,
+    paddingVertical: "$2",
+    hoverStyle: collapsible ? {
+      opacity: 0.8
+    } : void 0,
+    role: collapsible ? "button" : void 0,
+    "aria-expanded": collapsible ? !isCollapsed : void 0,
+    "aria-controls": collapsible ? `section-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0,
+    children: [collapsible && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChevronIcon, {
+      collapsed: isCollapsed
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingComponent, {
+      ...knobProps.heading,
+      size: level === 1 ? "$8" : level === 2 ? "$6" : level === 3 ? "$5" : "$4",
+      fontWeight: "600",
+      color: "$color",
+      children: label
+    })]
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: [headingContent, description && !isCollapsed && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: knobProps.sizeToken,
+      ...knobProps.body,
+      color: "$color10",
+      marginTop: "$-1",
+      marginBottom: "$1",
+      paddingLeft: collapsible ? "$6" : void 0,
+      children: description
+    }), showSeparator && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+      marginVertical: "$1",
+      backgroundColor: "$color5"
+    }), children && !isCollapsed && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      id: collapsible ? `section-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0,
+      ...knobProps.gap,
+      paddingLeft: collapsible ? "$4" : void 0,
+      children
+    })]
+  });
+}
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Heading_exports","__export","Heading","module","exports","import_jsx_runtime","require","import_theme","import_react","import_tamagui","ChevronIcon","param","collapsed","jsx","Text","fontSize","color","children","label","description","level","collapsible","defaultCollapsed","showSeparator","onCollapseChange","stackProps","knobProps","useResolvedKnobs","isCollapsed","setIsCollapsed","useState","handleToggle","useCallback","newState","HeadingComponent","H1","H2","H3","H4","headingContent","jsxs","XStack","alignItems","gap","cursor","onPress","paddingVertical","hoverStyle","opacity","role","replace","toLowerCase","heading","size","fontWeight","YStack","sizeToken","body","marginTop","marginBottom","paddingLeft","Separator","marginVertical","backgroundColor","id"],"sources":["../../../../src/fields/Heading/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}