@multiplatform.one/frappe-ui 6.0.0

package/dist/jsx/fields/HTML/index.mjs

@@ -0,0 +1,57 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo } from "react";
+import { Label, Text, View, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function sanitizeHtml(html) {
+  return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+}
+function HtmlContent({
+  html
+}) {
+  const webProps = {
+    dangerouslySetInnerHTML: {
+      __html: html
+    },
+    style: {
+      lineHeight: 1.5,
+      fontSize: 14,
+      color: "var(--color)"
+    }
+  };
+  return /* @__PURE__ */jsx(View, {
+    ...webProps
+  });
+}
+function Html({
+  label,
+  value = "",
+  ...stackProps
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const sanitizedHtml = useMemo(() => sanitizeHtml(value), [value]);
+  return /* @__PURE__ */jsxs(YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: [label && /* @__PURE__ */jsx(Label, {
+      children: label
+    }), /* @__PURE__ */jsx(YStack, {
+      ...knobProps.borderRadius,
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      backgroundColor: "$backgroundHover",
+      ...knobProps.panelPadding,
+      minHeight: 60,
+      children: sanitizedHtml ? /* @__PURE__ */jsx(HtmlContent, {
+        html: sanitizedHtml
+      }) : /* @__PURE__ */jsx(Text, {
+        color: "$color10",
+        fontSize: "$2",
+        children: "No content"
+      })
+    })]
+  });
+}
+export { Html };
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/fields/HTML/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useResolvedKnobs","useMemo","Label","Text","View","YStack","jsx","jsxs","sanitizeHtml","html","replace","HtmlContent","webProps","dangerouslySetInnerHTML","__html","style","lineHeight","fontSize","color","Html","label","value","stackProps","knobProps","sanitizedHtml","gap","children","borderRadius","borderWidth","borderColor","backgroundColor","panelPadding","minHeight"],"sources":["../../../../src/fields/HTML/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,QAAwB;AACjC,SAASC,OAAA,QAAe;AACxB,SAASC,KAAA,EAAOC,IAAA,EAAMC,IAAA,EAAMC,MAAA,QAAgC;AAmBnD,SAAAC,GAAA,EAQLC,IAAA,QARK;AAVT,SAASC,aAAaC,IAAA,EAAsB;EAC1C,OAAOA,IAAA,CAAKC,OAAA,CAAQ,uDAAuD,EAAE;AAC/E;AAEA,SAASC,YAAY;EAAEF;AAAK,GAAqB;EAE/C,MAAMG,QAAA,GAAW;IACfC,uBAAA,EAAyB;MAAEC,MAAA,EAAQL;IAAK;IACxCM,KAAA,EAAO;MAAEC,UAAA,EAAY;MAAKC,QAAA,EAAU;MAAIC,KAAA,EAAO;IAAe;EAChE;EACA,OAAO,eAAAZ,GAAA,CAACF,IAAA;IAAM,GAAIQ;EAAA,CAAsC;AAC1D;AAEO,SAASO,KAAK;EAAEC,KAAA;EAAOC,KAAA,GAAQ;EAAI,GAAGC;AAAW,GAAc;EACpE,MAAM;IAAEC;EAAU,IAAIvB,gBAAA,CAAiB;EACvC,MAAMwB,aAAA,GAAgBvB,OAAA,CAAQ,MAAMO,YAAA,CAAaa,KAAK,GAAG,CAACA,KAAK,CAAC;EAEhE,OACE,eAAAd,IAAA,CAACF,MAAA;IAAQ,GAAGkB,SAAA,CAAUE,GAAA;IAAM,GAAGH,UAAA;IAC5BI,QAAA,GAAAN,KAAA,IAAS,eAAAd,GAAA,CAACJ,KAAA;MAAOwB,QAAA,EAAAN;IAAA,CAAM,GACxB,eAAAd,GAAA,CAACD,MAAA;MACE,GAAGkB,SAAA,CAAUI,YAAA;MACdC,WAAA,EAAa;MACbC,WAAA,EAAY;MACZC,eAAA,EAAgB;MACf,GAAGP,SAAA,CAAUQ,YAAA;MACdC,SAAA,EAAW;MAEVN,QAAA,EAAAF,aAAA,GACC,eAAAlB,GAAA,CAACK,WAAA;QAAYF,IAAA,EAAMe;MAAA,CAAe,IAElC,eAAAlB,GAAA,CAACH,IAAA;QAAKe,KAAA,EAAM;QAAWD,QAAA,EAAS;QAAKS,QAAA;MAAA,CAErC;IAAA,CAEJ;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/jsx/fields/HTML/index.native.js

@@ -0,0 +1,89 @@
+"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 HTML_exports = {};
+__export(HTML_exports, {
+  Html: () => Html
+});
+module.exports = __toCommonJS(HTML_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 sanitizeHtml(html) {
+  return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+}
+function HtmlContent(param) {
+  var {
+    html
+  } = param;
+  var webProps = {
+    dangerouslySetInnerHTML: {
+      __html: html
+    },
+    style: {
+      lineHeight: 1.5,
+      fontSize: 14,
+      color: "var(--color)"
+    }
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    ...webProps
+  });
+}
+function Html(param) {
+  var {
+    label,
+    value = "",
+    ...stackProps
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var sanitizedHtml = (0, import_react.useMemo)(function () {
+    return sanitizeHtml(value);
+  }, [value]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+      children: label
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      ...knobProps.borderRadius,
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      backgroundColor: "$backgroundHover",
+      ...knobProps.panelPadding,
+      minHeight: 60,
+      children: sanitizedHtml ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(HtmlContent, {
+        html: sanitizedHtml
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color10",
+        fontSize: "$2",
+        children: "No content"
+      })
+    })]
+  });
+}
+//# sourceMappingURL=index.native.js.map

package/dist/jsx/fields/HTML/index.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","HTML_exports","Html","module","exports","import_jsx_runtime","require","import_theme","import_react","import_tamagui","sanitizeHtml","html","replace","HtmlContent","param","webProps"],"sources":["../../../../src/fields/HTML/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AACT,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAAe;AACxB,IAAAC,gBAAgB,GAAMF,MAAM,CAAAG,wBAAgC;AAmBnD,IAAAC,iBAQL,GAAAJ,MARK,CAAAK,mBAAA;AAVT,IAAAC,YAAS,GAAAN,MAAa,CAAAO,SAAsB,CAAAC,cAAA;AAC1C,IAAAC,QAAO,GAAKA,CAAAC,MAAQ,EAAAC,GAAA;EACtB,SAAAC,IAAA,IAAAD,GAAA,EAEAZ,SAAS,CAAAW,MAAA,EAAYE,IAAE,EAAK;IAAAC,GAAqB,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AAE/C;AAAiB,IACfC,WAAA,GAAAA,CAAAC,EAAA,EAAAC,IAAA,EAAyBC,MAAE,EAAAC,IAAQ,KAAK;EAAA,IACxCF,IAAA,IAAS,OAAAA,IAAY,KAAK,YAAU,OAAIA,IAAO,eAAe;IAChE,SAAAG,GAAA,IAAAhB,iBAAA,CAAAa,IAAA,GACA,IAAO,CAAAX,YAAA,CAAAe,IAAA,CAACL,EAAA,EAAAI,GAAA,CAAM,IAAIA,GAAA,KAAAF,MAAsC,EAC1DnB,SAAA,CAAAiB,EAAA,EAAAI,GAAA;MAAAP,GAAA,EAAAA,CAAA,KAAAI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EAEO;EACL,OAAME,EAAE;AACR;AAEA,IAAAM,YACE,GAAAC,GAAA,IAAAR,WAAC,CAAQhB,SAAG,KAAU,YAAS;EAAAyB,KAC5B;AAAA,IAAAD,GAAA;AAAA,IAAAE,YAAS;AAAchB,QACxB,CAAAgB,YAAA;EAAAC,IAAC,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OACK,GAAAN,YAAU,CAAAG,YAAA;AAAA,IAAAI,kBACD,GAAAC,OAAA;AAAA,IAAAC,YACb,GAAAD,OAAY;AAAA,IAAAE,YACZ,GAAAF,OAAgB;AAAA,IAAAG,cACZ,GAAUH,OAAA;AAAA,SACdI,YAAWA,CAAAC,IAAA;EAAA,OAEVA,IAAA,CAAAC,OAAA,sDACoB;AAInB;AAAA,SAEJC,YAAAC,KAAA;EAAA,IACF;IAAAH;EAAA,IAAAG,KAAA;EAEJ,IAAAC,QAAA","ignoreList":[]}

package/dist/jsx/fields/Heading/Heading.stories.mjs

@@ -0,0 +1,155 @@
+import { action } from "@multiplatform.one/storybook";
+import { Text, YStack } from "tamagui";
+import { Heading } from "./index.mjs";
+import { Data } from "../Data/index.mjs";
+import { Check } from "../Check/index.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Heading_stories_default = {
+  title: "FrappeUI/Heading",
+  component: 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__ */jsx(Heading, {
+  ...args
+});
+Default.args = {
+  label: "General Information",
+  level: 2
+};
+Default.storyName = "Main";
+const Collapsible = () => {
+  return /* @__PURE__ */jsx(YStack, {
+    gap: "$4",
+    width: 500,
+    children: /* @__PURE__ */jsx(Heading, {
+      label: "Personal Information",
+      description: "Click to expand/collapse",
+      level: 2,
+      collapsible: true,
+      onCollapseChange: action("onCollapseChange"),
+      children: /* @__PURE__ */jsx(YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: /* @__PURE__ */jsx(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] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [newsletter, setNewsletter] = useState(false);
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: "$4",
+    width: 500,
+    children: [/* @__PURE__ */jsx(Heading, {
+      label: "Personal Information",
+      level: 2,
+      showSeparator: true,
+      collapsible: true,
+      children: /* @__PURE__ */jsxs(YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: [/* @__PURE__ */jsx(Data, {
+          label: "First Name",
+          value: firstName,
+          onChange: v => setFirstName(v),
+          required: true
+        }), /* @__PURE__ */jsx(Data, {
+          label: "Last Name",
+          value: lastName,
+          onChange: v => setLastName(v),
+          required: true
+        })]
+      })
+    }), /* @__PURE__ */jsx(Heading, {
+      label: "Contact Information",
+      level: 2,
+      showSeparator: true,
+      collapsible: true,
+      children: /* @__PURE__ */jsx(YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: /* @__PURE__ */jsx(Data, {
+          label: "Email",
+          value: email,
+          onChange: v => setEmail(v),
+          required: true
+        })
+      })
+    }), /* @__PURE__ */jsx(Heading, {
+      label: "Preferences",
+      description: "Optional settings",
+      level: 2,
+      showSeparator: true,
+      collapsible: true,
+      defaultCollapsed: true,
+      children: /* @__PURE__ */jsx(YStack, {
+        gap: "$3",
+        paddingTop: "$3",
+        children: /* @__PURE__ */jsx(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."
+    }
+  }
+};
+export { Collapsible, Default, FormWithSections, Heading_stories_default as default };
+//# sourceMappingURL=Heading.stories.mjs.map

package/dist/jsx/fields/Heading/Heading.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["action","Text","YStack","Heading","Data","Check","useState","jsx","jsxs","Heading_stories_default","title","component","parameters","status","type","docs","description","argTypes","label","control","level","options","collapsible","defaultCollapsed","showSeparator","Default","args","storyName","Collapsible","gap","width","children","onCollapseChange","paddingTop","color","story","FormWithSections","firstName","setFirstName","lastName","setLastName","email","setEmail","newsletter","setNewsletter","value","onChange","v","required"],"sources":["../../../../src/fields/Heading/Heading.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/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/jsx/fields/Heading/Heading.stories.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","Heading_stories_exports","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"],"sources":["../../../../src/fields/Heading/Heading.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Heading/index.mjs

@@ -0,0 +1,87 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useState } from "react";
+import { H1, H2, H3, H4, Separator, Text, XStack, YStack } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChevronIcon({
+  collapsed
+}) {
+  return /* @__PURE__ */jsx(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
+  } = useResolvedKnobs();
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const handleToggle = useCallback(() => {
+    if (!collapsible) return;
+    const newState = !isCollapsed;
+    setIsCollapsed(newState);
+    onCollapseChange?.(newState);
+  }, [collapsible, isCollapsed, onCollapseChange]);
+  const HeadingComponent = {
+    1: H1,
+    2: H2,
+    3: H3,
+    4: H4
+  }[level];
+  const headingContent = /* @__PURE__ */jsxs(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__ */jsx(ChevronIcon, {
+      collapsed: isCollapsed
+    }), /* @__PURE__ */jsx(HeadingComponent, {
+      ...knobProps.heading,
+      size: level === 1 ? "$8" : level === 2 ? "$6" : level === 3 ? "$5" : "$4",
+      fontWeight: "600",
+      color: "$color",
+      children: label
+    })]
+  });
+  return /* @__PURE__ */jsxs(YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: [headingContent, description && !isCollapsed && /* @__PURE__ */jsx(Text, {
+      fontSize: knobProps.sizeToken,
+      ...knobProps.body,
+      color: "$color10",
+      marginTop: "$-1",
+      marginBottom: "$1",
+      paddingLeft: collapsible ? "$6" : void 0,
+      children: description
+    }), showSeparator && /* @__PURE__ */jsx(Separator, {
+      marginVertical: "$1",
+      backgroundColor: "$color5"
+    }), children && !isCollapsed && /* @__PURE__ */jsx(YStack, {
+      id: collapsible ? `section-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0,
+      ...knobProps.gap,
+      paddingLeft: collapsible ? "$4" : void 0,
+      children
+    })]
+  });
+}
+export { Heading };
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/fields/Heading/index.mjs.map

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