@mohammadsalman/storybook-custom-ui 1.0.3 → 1.0.4

package/dist/index.cjs.js

@@ -1 +1,6 @@
-"use strict";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react");var _={exports:{}},p={};var $;function ne(){if($)return p;$=1;var s=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function u(d,l,c){var m=null;if(c!==void 0&&(m=""+c),l.key!==void 0&&(m=""+l.key),"key"in l){c={};for(var h in l)h!=="key"&&(c[h]=l[h])}else c=l;return l=c.ref,{$$typeof:s,type:d,key:m,ref:l!==void 0?l:null,props:c}}return p.Fragment=i,p.jsx=u,p.jsxs=u,p}var b={};var M;function oe(){return M||(M=1,process.env.NODE_ENV!=="production"&&(function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ee?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case x:return"Fragment";case J:return"Profiler";case H:return"StrictMode";case X:return"Suspense";case Z:return"SuspenseList";case K:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case B:return e.displayName||"Context";case q:return(e._context.displayName||"Context")+".Consumer";case G:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Q:return t=e.displayName||null,t!==null?t:s(e.type)||"Memo";case E:t=e._payload,e=e._init;try{return s(e(t))}catch{}}return null}function i(e){return""+e}function u(e){try{i(e);var t=!1}catch{t=!0}if(t){t=console;var n=t.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),i(e)}}function d(e){if(e===x)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===E)return"<...>";try{var t=s(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function l(){var e=R.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function m(e){if(P.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function h(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function D(){var e=s(this.type);return C[e]||(C[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function U(e,t,n,o,g,y){var a=n.ref;return e={$$typeof:O,type:e,key:t,props:n,_owner:o},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:D}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:g}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:y}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,t,n,o,g,y){var a=t.children;if(a!==void 0)if(o)if(re(a)){for(o=0;o<a.length;o++)A(a[o]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else A(a);if(P.call(t,"key")){a=s(e);var f=Object.keys(t).filter(function(te){return te!=="key"});o=0<f.length?"{key: someKey, "+f.join(": ..., ")+": ...}":"{key: someKey}",z[a+o]||(f=0<f.length?"{"+f.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,a,f,a),z[a+o]=!0)}if(a=null,n!==void 0&&(u(n),a=""+n),m(t)&&(u(t.key),a=""+t.key),"key"in t){n={};for(var T in t)T!=="key"&&(n[T]=t[T])}else n=t;return a&&h(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),U(e,a,n,l(),g,y)}function A(e){S(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===E&&(e._payload.status==="fulfilled"?S(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function S(e){return typeof e=="object"&&e!==null&&e.$$typeof===O}var v=I,O=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),H=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),q=Symbol.for("react.consumer"),B=Symbol.for("react.context"),G=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),Z=Symbol.for("react.suspense_list"),Q=Symbol.for("react.memo"),E=Symbol.for("react.lazy"),K=Symbol.for("react.activity"),ee=Symbol.for("react.client.reference"),R=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,re=Array.isArray,k=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var N,C={},Y=v.react_stack_bottom_frame.bind(v,c)(),F=k(d(c)),z={};b.Fragment=x,b.jsx=function(e,t,n){var o=1e4>R.recentlyCreatedOwnerStacks++;return w(e,t,n,!1,o?Error("react-stack-top-frame"):Y,o?k(d(e)):F)},b.jsxs=function(e,t,n){var o=1e4>R.recentlyCreatedOwnerStacks++;return w(e,t,n,!0,o?Error("react-stack-top-frame"):Y,o?k(d(e)):F)}})()),b}var V;function ae(){return V||(V=1,process.env.NODE_ENV==="production"?_.exports=ne():_.exports=oe()),_.exports}var r=ae();const j=({primary:s=!1,size:i="medium",backgroundColor:u,label:d,...l})=>{const c=s?"storybook-button--primary":"storybook-button--secondary";return r.jsx("button",{type:"button",className:["storybook-button",`storybook-button--${i}`,c].join(" "),style:{backgroundColor:u},...l,children:d})},L=({user:s,onLogin:i,onLogout:u,onCreateAccount:d})=>r.jsx("header",{children:r.jsxs("div",{className:"storybook-header",children:[r.jsxs("div",{children:[r.jsx("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:r.jsxs("g",{fill:"none",fillRule:"evenodd",children:[r.jsx("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),r.jsx("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),r.jsx("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),r.jsx("h1",{children:"Acme"})]}),r.jsx("div",{children:s?r.jsxs(r.Fragment,{children:[r.jsxs("span",{className:"welcome",children:["Welcome, ",r.jsx("b",{children:s.name}),"!"]}),r.jsx(j,{size:"small",onClick:u,label:"Log out"})]}):r.jsxs(r.Fragment,{children:[r.jsx(j,{size:"small",onClick:i,label:"Log in"}),r.jsx(j,{primary:!0,size:"small",onClick:d,label:"Sign up"})]})})]})}),se=()=>{const[s,i]=I.useState();return r.jsxs("article",{children:[r.jsx(L,{user:s,onLogin:()=>i({name:"Jane Doe"}),onLogout:()=>i(void 0),onCreateAccount:()=>i({name:"Jane Doe"})}),r.jsxs("section",{className:"storybook-page",children:[r.jsx("h2",{children:"Pages in Storybook"}),r.jsxs("p",{children:["We recommend building UIs with a"," ",r.jsx("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:r.jsx("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]}),r.jsx("p",{children:"Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"}),r.jsxs("ul",{children:[r.jsx("li",{children:'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories'}),r.jsx("li",{children:"Assemble data in the page component from your services. You can mock these services out using Storybook."})]}),r.jsxs("p",{children:["Get a guided tutorial on component-driven development at"," ",r.jsx("a",{href:"https://storybook.js.org/tutorials/",target:"_blank",rel:"noopener noreferrer",children:"Storybook tutorials"}),". Read more in the"," ",r.jsx("a",{href:"https://storybook.js.org/docs",target:"_blank",rel:"noopener noreferrer",children:"docs"}),"."]}),r.jsxs("div",{className:"tip-wrapper",children:[r.jsx("span",{className:"tip",children:"Tip"})," Adjust the width of the canvas with the"," ",r.jsx("svg",{width:"10",height:"10",viewBox:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("g",{fill:"none",fillRule:"evenodd",children:r.jsx("path",{d:"M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",id:"a",fill:"#999"})})}),"Viewports addon in the toolbar"]})]})]})};exports.Button=j;exports.Header=L;exports.Page=se;

package/dist/index.css

@@ -0,0 +1 @@
+.storybook-button{display:inline-block;cursor:pointer;border:0;border-radius:3em;font-weight:700;line-height:1;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button--primary{background-color:#555ab9;color:#fff}.storybook-button--secondary{box-shadow:#00000026 0 0 0 1px inset;background-color:transparent;color:#333}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:16px}.storybook-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);padding:15px 20px;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-header svg{display:inline-block;vertical-align:top}.storybook-header h1{display:inline-block;vertical-align:top;margin:6px 0 6px 10px;font-weight:700;font-size:20px;line-height:1}.storybook-header button+button{margin-left:10px}.storybook-header .welcome{margin-right:10px;color:#333;font-size:14px}.storybook-page{margin:0 auto;padding:48px 20px;max-width:600px;color:#333;font-size:14px;line-height:24px;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-page h2{display:inline-block;vertical-align:top;margin:0 0 4px;font-weight:700;font-size:32px;line-height:1}.storybook-page p{margin:1em 0}.storybook-page a{color:inherit}.storybook-page ul{margin:1em 0;padding-left:30px}.storybook-page li{margin-bottom:8px}.storybook-page .tip{display:inline-block;vertical-align:top;margin-right:10px;border-radius:1em;background:#e7fdd8;padding:4px 12px;color:#357a14;font-weight:700;font-size:11px;line-height:12px}.storybook-page .tip-wrapper{margin-top:40px;margin-bottom:40px;font-size:13px;line-height:20px}.storybook-page .tip-wrapper svg{display:inline-block;vertical-align:top;margin-top:3px;margin-right:4px;width:12px;height:12px}.storybook-page .tip-wrapper svg path{fill:#1ea7fd}

package/dist/index.esm.js

@@ -1 +1,374 @@
-
+import L from "react";
+var g = { exports: {} }, p = {};
+var $;
+function te() {
+  if ($) return p;
+  $ = 1;
+  var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), i = /* @__PURE__ */ Symbol.for("react.fragment");
+  function u(d, l, c) {
+    var m = null;
+    if (c !== void 0 && (m = "" + c), l.key !== void 0 && (m = "" + l.key), "key" in l) {
+      c = {};
+      for (var h in l)
+        h !== "key" && (c[h] = l[h]);
+    } else c = l;
+    return l = c.ref, {
+      $$typeof: s,
+      type: d,
+      key: m,
+      ref: l !== void 0 ? l : null,
+      props: c
+    };
+  }
+  return p.Fragment = i, p.jsx = u, p.jsxs = u, p;
+}
+var v = {};
+var V;
+function ne() {
+  return V || (V = 1, process.env.NODE_ENV !== "production" && (function() {
+    function s(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === K ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case x:
+          return "Fragment";
+        case J:
+          return "Profiler";
+        case W:
+          return "StrictMode";
+        case G:
+          return "Suspense";
+        case X:
+          return "SuspenseList";
+        case Q:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case U:
+            return "Portal";
+          case q:
+            return e.displayName || "Context";
+          case H:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case B:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return t = e.displayName || null, t !== null ? t : s(e.type) || "Memo";
+          case j:
+            t = e._payload, e = e._init;
+            try {
+              return s(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function i(e) {
+      return "" + e;
+    }
+    function u(e) {
+      try {
+        i(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var n = t.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          o
+        ), i(e);
+      }
+    }
+    function d(e) {
+      if (e === x) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === j)
+        return "<...>";
+      try {
+        var t = s(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function l() {
+      var e = E.A;
+      return e === null ? null : e.getOwner();
+    }
+    function c() {
+      return Error("react-stack-top-frame");
+    }
+    function m(e) {
+      if (P.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function h(e, t) {
+      function n() {
+        N || (N = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          t
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function M() {
+      var e = s(this.type);
+      return C[e] || (C[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function D(e, t, n, o, _, k) {
+      var a = n.ref;
+      return e = {
+        $$typeof: O,
+        type: e,
+        key: t,
+        props: n,
+        _owner: o
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: M
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: _
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: k
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function y(e, t, n, o, _, k) {
+      var a = t.children;
+      if (a !== void 0)
+        if (o)
+          if (ee(a)) {
+            for (o = 0; o < a.length; o++)
+              A(a[o]);
+            Object.freeze && Object.freeze(a);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else A(a);
+      if (P.call(t, "key")) {
+        a = s(e);
+        var f = Object.keys(t).filter(function(re) {
+          return re !== "key";
+        });
+        o = 0 < f.length ? "{key: someKey, " + f.join(": ..., ") + ": ...}" : "{key: someKey}", z[a + o] || (f = 0 < f.length ? "{" + f.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          o,
+          a,
+          f,
+          a
+        ), z[a + o] = !0);
+      }
+      if (a = null, n !== void 0 && (u(n), a = "" + n), m(t) && (u(t.key), a = "" + t.key), "key" in t) {
+        n = {};
+        for (var T in t)
+          T !== "key" && (n[T] = t[T]);
+      } else n = t;
+      return a && h(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), D(
+        e,
+        a,
+        n,
+        l(),
+        _,
+        k
+      );
+    }
+    function A(e) {
+      S(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === j && (e._payload.status === "fulfilled" ? S(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function S(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === O;
+    }
+    var b = L, O = /* @__PURE__ */ Symbol.for("react.transitional.element"), U = /* @__PURE__ */ Symbol.for("react.portal"), x = /* @__PURE__ */ Symbol.for("react.fragment"), W = /* @__PURE__ */ Symbol.for("react.strict_mode"), J = /* @__PURE__ */ Symbol.for("react.profiler"), H = /* @__PURE__ */ Symbol.for("react.consumer"), q = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), X = /* @__PURE__ */ Symbol.for("react.suspense_list"), Z = /* @__PURE__ */ Symbol.for("react.memo"), j = /* @__PURE__ */ Symbol.for("react.lazy"), Q = /* @__PURE__ */ Symbol.for("react.activity"), K = /* @__PURE__ */ Symbol.for("react.client.reference"), E = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, P = Object.prototype.hasOwnProperty, ee = Array.isArray, R = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    b = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var N, C = {}, Y = b.react_stack_bottom_frame.bind(
+      b,
+      c
+    )(), F = R(d(c)), z = {};
+    v.Fragment = x, v.jsx = function(e, t, n) {
+      var o = 1e4 > E.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        t,
+        n,
+        !1,
+        o ? Error("react-stack-top-frame") : Y,
+        o ? R(d(e)) : F
+      );
+    }, v.jsxs = function(e, t, n) {
+      var o = 1e4 > E.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        t,
+        n,
+        !0,
+        o ? Error("react-stack-top-frame") : Y,
+        o ? R(d(e)) : F
+      );
+    };
+  })()), v;
+}
+var I;
+function oe() {
+  return I || (I = 1, process.env.NODE_ENV === "production" ? g.exports = te() : g.exports = ne()), g.exports;
+}
+var r = oe();
+const w = ({
+  primary: s = !1,
+  size: i = "medium",
+  backgroundColor: u,
+  label: d,
+  ...l
+}) => {
+  const c = s ? "storybook-button--primary" : "storybook-button--secondary";
+  return /* @__PURE__ */ r.jsx(
+    "button",
+    {
+      type: "button",
+      className: ["storybook-button", `storybook-button--${i}`, c].join(" "),
+      style: { backgroundColor: u },
+      ...l,
+      children: d
+    }
+  );
+}, ae = ({ user: s, onLogin: i, onLogout: u, onCreateAccount: d }) => /* @__PURE__ */ r.jsx("header", { children: /* @__PURE__ */ r.jsxs("div", { className: "storybook-header", children: [
+  /* @__PURE__ */ r.jsxs("div", { children: [
+    /* @__PURE__ */ r.jsx("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ r.jsxs("g", { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ r.jsx(
+        "path",
+        {
+          d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",
+          fill: "#FFF"
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        "path",
+        {
+          d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",
+          fill: "#555AB9"
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        "path",
+        {
+          d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",
+          fill: "#91BAF8"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ r.jsx("h1", { children: "Acme" })
+  ] }),
+  /* @__PURE__ */ r.jsx("div", { children: s ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsxs("span", { className: "welcome", children: [
+      "Welcome, ",
+      /* @__PURE__ */ r.jsx("b", { children: s.name }),
+      "!"
+    ] }),
+    /* @__PURE__ */ r.jsx(w, { size: "small", onClick: u, label: "Log out" })
+  ] }) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(w, { size: "small", onClick: i, label: "Log in" }),
+    /* @__PURE__ */ r.jsx(w, { primary: !0, size: "small", onClick: d, label: "Sign up" })
+  ] }) })
+] }) }), le = () => {
+  const [s, i] = L.useState();
+  return /* @__PURE__ */ r.jsxs("article", { children: [
+    /* @__PURE__ */ r.jsx(
+      ae,
+      {
+        user: s,
+        onLogin: () => i({ name: "Jane Doe" }),
+        onLogout: () => i(void 0),
+        onCreateAccount: () => i({ name: "Jane Doe" })
+      }
+    ),
+    /* @__PURE__ */ r.jsxs("section", { className: "storybook-page", children: [
+      /* @__PURE__ */ r.jsx("h2", { children: "Pages in Storybook" }),
+      /* @__PURE__ */ r.jsxs("p", { children: [
+        "We recommend building UIs with a",
+        " ",
+        /* @__PURE__ */ r.jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ r.jsx("strong", { children: "component-driven" }) }),
+        " ",
+        "process starting with atomic components and ending with pages."
+      ] }),
+      /* @__PURE__ */ r.jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }),
+      /* @__PURE__ */ r.jsxs("ul", { children: [
+        /* @__PURE__ */ r.jsx("li", { children: 'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories' }),
+        /* @__PURE__ */ r.jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })
+      ] }),
+      /* @__PURE__ */ r.jsxs("p", { children: [
+        "Get a guided tutorial on component-driven development at",
+        " ",
+        /* @__PURE__ */ r.jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }),
+        ". Read more in the",
+        " ",
+        /* @__PURE__ */ r.jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }),
+        "."
+      ] }),
+      /* @__PURE__ */ r.jsxs("div", { className: "tip-wrapper", children: [
+        /* @__PURE__ */ r.jsx("span", { className: "tip", children: "Tip" }),
+        " Adjust the width of the canvas with the",
+        " ",
+        /* @__PURE__ */ r.jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ r.jsx("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ r.jsx(
+          "path",
+          {
+            d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",
+            id: "a",
+            fill: "#999"
+          }
+        ) }) }),
+        "Viewports addon in the toolbar"
+      ] })
+    ] })
+  ] });
+};
+export {
+  w as Button,
+  ae as Header,
+  le as Page
+};

package/package.json

@@ -2,8 +2,8 @@
   "name": "@mohammadsalman/storybook-custom-ui",
   "description": "A minimal React TypeScript component library with Button component and useFormInput hook",
 
-  "version": "1.0.3",
-  "main": "dist/index.js", 
+  "version": "1.0.4",
+  "main": "dist/index.cjs.js", 
   "module": "dist/index.esm.js",  
   "types": "dist/index.d.ts", 
   "files": ["dist"],