@muibook/components 1.0.1 → 1.0.3

package/dist/muibook/assets/index-BN6UEWFf.js

@@ -1,439 +0,0 @@
-class p extends HTMLElement{constructor(){super();const i=this.attachShadow({mode:"open"}),n=`
-      :host { display: block; }
-    `,t=[{name:"variant",type:"string",options:"default, success, warning, error",default:"default",description:""},{name:"types",type:"string",options:"text, password, email, number, search, tel, url, date, time",default:"text",description:"Define the data context that the input supports"},{name:"id",type:"string",options:"{text}",default:"",description:"Identifier to group the label and input to allow user to focus on the input by clicking the label."},{name:"label",required:!0,type:"string",options:"{text}",default:"",description:"Provide the input with a unique label.  If without, a console warning will remind you to add label."},{name:"hide-label",type:"boolean",options:"hide-label",default:"",description:"Hides the label but it is still present for screen readers"},{name:"disabled",type:"boolean",options:"disabled",default:"",description:"Disable the input"},{name:"name",type:"string",options:"{text}",default:"",description:"The name attribute is used when submitting forms."},{name:"value",type:"string",options:"{text}",default:"",description:"Sets the current value of the input field."},{name:"placeholder",type:"string",options:"{text}",default:"",description:"You want the input to start with pre-filled content."}],s=t.map(e=>`
-          <story-type-row
-            ${e.required?"required":""}
-            name="${e.name}"
-            type="${e.type}" 
-            options="${e.options||""}"
-            default="${e.default||""}"
-            description="${e.description}">
-          </story-type-row>
-        `).join(""),l=t.map((e,o)=>{const b=o===t.length-1?"last-child":"";return`
-            <mui-accordion-block
-              style="position: relative; z-index: 1;" 
-              size="medium" 
-              heading=${e.name.charAt(0).toUpperCase()+e.name.slice(1)} 
-              ${b}>
-              <story-type-slat
-                slot="detail"
-                ${e.required?"required":""}
-                name="${e.name}"
-                type="${e.type}" 
-                options="${e.options||""}"
-                default="${e.default||""}"
-                description="${e.description}">
-              </story-type-slat>
-            </mui-accordion-block>
-          `}).join("");i.innerHTML=`
-      <style>${n}</style>
-
-      <story-template 
-        title="Input"
-        description="An input component for capturing user text, styled for consistency across your UI."
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-input/index.ts"
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-795&t=GMqx21isUVAMpLJp-1"
-        accessibility="
-          A label is required for screen reader support to describe the input’s purpose.;
-          If hide-label is used, the label is visually hidden but accessible via aria-label.;
-          The label and input are linked via for and id. If no id is provided, one is generated.;
-          Clear focus styles are shown for keyboard users.;
-          The native disabled attribute is fully supported by assistive tech.;
-          Logs a console warning if no label is provided.
-        "
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-        <spec-card title="Props">
-          <mui-responsive breakpoint="767" slot="body">
-            <story-type-table slot="showAbove">
-              ${s}
-            </story-type-table>
-            <mui-accordion-group exclusive slot="showBelow">
-              ${l}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-card>
-
-
-        <story-card title="Default" description="The label is required, if not set there will be a console warning.">
-          <div slot="body">
-            <mui-input label="Default"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input label="Default"&gt;&lt;mui-input&gt;
-            <br />
-          </mui-code>
-        </story-card>
-
-        <story-card title="Variant: Success" description="The label is required, if not set there will be a console warning.">
-          <div slot="body">
-            <mui-input variant="success"  value="value" type="password" label="Password"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input variant="success" value="value" type="password" label="Password"&gt;&lt;mui-input&gt;
-            <br />
-          </mui-code>
-        </story-card>
-
-        <story-card title="Variant: Warning" description="The label is required, if not set there will be a console warning.">
-          <div slot="body">
-            <mui-input variant="warning" value="michael.mui.com" label="Email"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input variant="warning" value="michael.mui.com" label="Email"&gt;&lt;mui-input&gt;
-            <br />
-          </mui-code>
-        </story-card>
-
-        <story-card title="Variant: Error" description="The label is required, if not set there will be a console warning.">
-          <div slot="body">
-            <mui-input variant="error" value="michael.mui.com" label="Email"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input variant="error" value="michael.mui.com" label="Email"&gt;&lt;mui-input&gt;
-            <br />
-          </mui-code>
-        </story-card>
-
-        <story-card title="Hide Label" description="The visible label is hidden and an aria-label is generated from the label to maintain screen reader support.">
-          <div slot="body">
-            <mui-input label="Hide Label" hide-label></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input label="Hide Label" hide-label&gt;&lt;mui-input&gt;
-            <br />
-          </mui-code>
-        </story-card>
-
-        <story-card title="Disabled">
-          <div slot="body">
-            <mui-input label="Disabled" disabled></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input label="Disabled" disabled&gt;&lt;mui-input&gt;
-            <br />
-          </mui-code>
-        </story-card>
-
-        <story-card title="Before: Add On">
-          <div slot="body">
-            <mui-input label="Enter amount">
-              <mui-addon slot="before"><mui-body>USD</mui-body></mui-addon>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input label="Enter amount"&gt;
-            <br />
-
-            &nbsp;&nbsp;&lt;mui-addon slot="before"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;USD&lt;mui-body&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-addon&gt;
-            <br />            
-
-            &lt;mui-input&gt;
-            <br />
-          </mui-code>
-        </story-card>
-
-        <story-card title="After: Add On">
-          <div slot="body">
-            <mui-input label="Enter amount">
-              <mui-addon slot="after"><mui-body>USD</mui-body></mui-input></mui-addon>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input label="Enter amount"&gt;
-            <br />
-
-            &nbsp;&nbsp;&lt;mui-addon slot="after"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;USD&lt;mui-body&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-addon&gt;
-            <br />            
-
-            &lt;mui-input&gt;
-            <br />
-          </mui-code>
-        </story-card>
-
-        <story-card title="Before: Select">
-          <div slot="body">
-            <mui-input type="search" label="Search">
-              <mui-select
-                style="width: 120px;"
-                slot="before"
-                label="Filter"
-                hide-label
-                  options='[
-                  {"value": "all", "label": "All"},
-                  {"value": "images", "label": "Images"},
-                  {"value": "video", "label": "Video"}
-                ]'>
-              </mui-select>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input type="search" label="Search"&gt;<br>
-            &nbsp;&nbsp;&lt;mui-select<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;slot="before"<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;label="Filter"<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;hide-label<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;style="width: 120px;"<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;options='[<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "all", "label": "All" },<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "images", "label": "Images" },<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "video", "label": "Video" }<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;]'&gt;<br>
-            &nbsp;&nbsp;&lt;/mui-select&gt;<br>
-            &lt;/mui-input&gt;
-          </<mui-code>
-        </story-card>
-
-        <story-card title="After: Select">
-          <div slot="body">
-            <mui-input type="number" label="Amount to transfer">
-              <mui-select
-                style="width: 100px;"
-                slot="after"
-                label="Currency"
-                hide-label
-                  options='[
-                  {"value": "jpy", "label": "JPY"},
-                  {"value": "usd", "label": "USD"}
-                ]'>
-              </mui-select>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input type="number" label="Amount to transfer"&gt;<br>
-            &nbsp;&nbsp;&lt;mui-select<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;slot="after"<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;label="Currency"<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;hide-label<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;style="width: 100px;"<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;options='[<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "jpy", "label": "JPY" },<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "usd", "label": "USD" }<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;]'&gt;<br>
-            &nbsp;&nbsp;&lt;/mui-select&gt;<br>
-            &lt;/mui-input&gt;
-          </<mui-code>
-        </story-card>
-
-        <story-card title="After: Button">
-          <div slot="body">
-            <mui-input type="email" label="Email" value="mui-web-components@proton.me">
-              <mui-button slot="after">Copy</mui-button>
-            </mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input 
-            <br />
-            &nbsp;&nbsp;type="email" 
-            <br />
-            &nbsp;&nbsp;label="Email" 
-            <br />
-            &nbsp;&nbsp;value="mui-web-components@proton.me"
-            <br />
-            &gt;
-            <br>
-            &nbsp;&nbsp;&lt;mui-button slot="after"&gt;Copy&lt;/mui-button&gt;<br>
-            &lt;/mui-input&gt;
-          </<mui-code>
-        </story-card>
-
-        <story-card title="Type: Text" description="The default input type for plain text.">
-          <div slot="body">
-            <mui-input label="Name" type="text" id="name-input" name="name" value="John Doe"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input 
-            <br />
-            &nbsp;&nbsp;label="Name"
-            <br />
-            &nbsp;&nbsp;type="text" 
-            <br />
-            &nbsp;&nbsp;id="name-input" 
-            <br />
-            &nbsp;&nbsp;name="name"
-            <br />
-            &nbsp;&nbsp;value="John Doe"
-            <br />
-            &gt;&lt;/mui-input&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Type: Email" description="Ensures the entered value follows email format.">
-          <div slot="body">
-            <mui-input label="Email" type="email" id="email-input" name="email" value="user@example.com"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input 
-            <br />
-            &nbsp;&nbsp;label="Email"
-            <br />
-            &nbsp;&nbsp;type="email" 
-            <br />
-            &nbsp;&nbsp;id="email-input" 
-            <br />
-            &nbsp;&nbsp;name="email"
-            <br />
-            &nbsp;&nbsp;value="user@example.com"
-            <br />
-            &gt;&lt;/mui-input&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Type: Password" description="Using type password masks the user-filled content.">
-          <div slot="body">
-            <mui-input label="Password" type="password" id="password-input" name="password" value="abcde1234"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input 
-            <br />
-            &nbsp;&nbsp;label="Password"
-            <br />
-            &nbsp;&nbsp;type="password" 
-            <br />
-            &nbsp;&nbsp;id="password-input" 
-            <br />
-            &nbsp;&nbsp;name="password"
-            <br />
-            &nbsp;&nbsp;value="abcde1234"
-            <br />
-            &gt;&lt;mui-input&gt;
-            <br />
-          </mui-code>
-        </story-card>
-
-        <story-card title="Type: Number" description="Restricts input to numeric values.">
-          <div slot="body">
-            <mui-input label="Age" type="number" id="age-input" name="age" value="30"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input 
-            <br />
-            &nbsp;&nbsp;label="Age"
-            <br />
-            &nbsp;&nbsp;type="number" 
-            <br />
-            &nbsp;&nbsp;id="age-input" 
-            <br />
-            &nbsp;&nbsp;name="age"
-            <br />
-            &nbsp;&nbsp;value="30"
-            <br />
-            &gt;&lt;/mui-input&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Type: URL" description="Validates URL format.">
-          <div slot="body">
-            <mui-input label="Website" type="url" id="url-input" name="website" value="https://example.com"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input 
-            <br />
-            &nbsp;&nbsp;label="Website"
-            <br />
-            &nbsp;&nbsp;type="url" 
-            <br />
-            &nbsp;&nbsp;id="url-input" 
-            <br />
-            &nbsp;&nbsp;name="website"
-            <br />
-            &nbsp;&nbsp;value="https://example.com"
-            <br />
-            &gt;&lt;/mui-input&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Type: Tel" description="Input for telephone numbers, no formatting enforced.">
-          <div slot="body">
-            <mui-input label="Phone" type="tel" id="phone-input" name="phone" value="+1234567890"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input 
-            <br />
-            &nbsp;&nbsp;label="Phone"
-            <br />
-            &nbsp;&nbsp;type="tel" 
-            <br />
-            &nbsp;&nbsp;id="phone-input" 
-            <br />
-            &nbsp;&nbsp;name="phone"
-            <br />
-            &nbsp;&nbsp;value="+1234567890"
-            <br />
-            &gt;&lt;/mui-input&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Type: Search" description="Styled and optimized for search fields.">
-          <div slot="body">
-            <mui-input label="Search" type="search" id="search-input" name="search" value="Query"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input 
-            <br />
-            &nbsp;&nbsp;label="Search"
-            <br />
-            &nbsp;&nbsp;type="search" 
-            <br />
-            &nbsp;&nbsp;id="search-input" 
-            <br />
-            &nbsp;&nbsp;name="search"
-            <br />
-            &nbsp;&nbsp;value="Query"
-            <br />
-            &gt;&lt;/mui-input&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Type: Date" description="Allows the user to pick a calendar date.">
-          <div slot="body">
-            <mui-input label="Birthdate" type="date" id="birthdate-input" name="birthdate" value="1990-01-01"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input 
-            <br />
-            &nbsp;&nbsp;label="Birthdate"
-            <br />
-            &nbsp;&nbsp;type="date" 
-            <br />
-            &nbsp;&nbsp;id="birthdate-input" 
-            <br />
-            &nbsp;&nbsp;name="birthdate"
-            <br />
-            &nbsp;&nbsp;value="1990-01-01"
-            <br />
-            &gt;&lt;/mui-input&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Type: Time" description="Provides a time picker for hour and minute selection.">
-          <div slot="body">
-            <mui-input label="Meeting Time" type="time" id="meeting-time-input" name="meetingTime" value="14:30"></mui-input>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-input 
-            <br />
-            &nbsp;&nbsp;label="Meeting Time"
-            <br />
-            &nbsp;&nbsp;type="time" 
-            <br />
-            &nbsp;&nbsp;id="meeting-time-input" 
-            <br />
-            &nbsp;&nbsp;name="meetingTime"
-            <br />
-            &nbsp;&nbsp;value="14:30"
-            <br />
-            &gt;&lt;/mui-input&gt;
-          </mui-code>
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-input",p);

package/dist/muibook/assets/index-Bc68V_xw.js

@@ -1,140 +0,0 @@
-class r extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),t=`
-      :host { display: block; }
-      .local-ring {
-        height: 6rem;
-        display: flex;
-        justify-content: center;
-        width: 100%;
-      }
-      .local-ring_text {
-        fill: #1b2830;
-        font-size: 1.2rem;
-        -webkit-transform: translateY(0.34em);
-        transform: translateY(0.34em);
-        font-weight: bold;
-      }
-    `,e=`
-      <div class="local-ring">
-        <svg 
-          width="100%" 
-          height="100%" 
-          viewBox="0 0 42 42" 
-          style="text-anchor: middle; width: 100%;"
-        >
-          <circle class="local-ring__hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
-          <circle class="local-ring__ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="4"></circle>
-          <circle class="local-ring__segment VE4Mc" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#000000" stroke-width="4" stroke-dasharray="50,50" stroke-dashoffset="25"></circle>
-          <g><text x="50%" y="50%" class="local-ring_text">2/4</text></g>
-        </svg>
-      </div>
-    `,i="1fr 1fr 1fr 106px",l=`
-      <mui-table> 
-        <mui-row-group heading> 
-          <mui-row columns="${i}"> 
-            <mui-cell heading>File</mui-cell> 
-            <mui-cell heading>Due date</mui-cell> 
-            <mui-cell heading>Status</mui-cell> 
-            <mui-cell heading>Automation</mui-cell> 
-          </mui-row> 
-        </mui-row-group> 
-        <mui-row-group> 
-          <mui-row columns="${i}"> 
-            <mui-cell align-y="center"><mui-body size="small">Alison Max</mui-body></mui-cell> 
-            <mui-cell align-y="center"><mui-v-stack space="var(--space-050)"><mui-body size="small">27/07/2020</mui-body><mui-badge>Quarterly</mui-badge></mui-v-stack></mui-cell> 
-            <mui-cell align-y="center"><mui-badge>Unlodged</mui-badge></mui-cell> 
-            <mui-cell align-y="center">${e}</mui-cell> 
-          </mui-row> 
-        </mui-row-group> 
-      </mui-table>
-    `,o=`
-        <mui-v-stack space="var(--space-400)">
-          ${e}
-          <mui-heading 
-            size="6" 
-            style="width: 100%; text-align: center;"
-          >
-            Transactions automated
-          </mui-heading>
-          
-          <mui-rule></mui-rule>
-
-          <mui-grid col="1fr 1fr 1fr">
-          <mui-v-stack space="var(--space-100)">
-            <mui-body size="small"><strong>Client</strong></mui-body>
-            <mui-body size="small">Alison Max</mui-body>
-          </mui-v-stack>
-          <mui-v-stack space="var(--space-100)">
-            <mui-body size="small" style="text-align: center;"><strong>Due date</strong></mui-body>
-            <mui-body size="small" style="text-align: center;">27/07/2020</mui-body>
-          </mui-v-stack>
-          <mui-v-stack space="var(--space-100)">
-            <mui-body size="small" style="text-align: right;"><strong>Status</strong></mui-body>
-            <mui-body size="small" style="text-align: right;">Unlodged</mui-body>
-          </mui-v-stack>
-        </mui-grid>
-
-        </mui-v-stack>
-    `;s.innerHTML=`
-      <style>${t}</style>
-
-      <story-template 
-        title="Responsive"
-        description="Dynamically render UI based on viewport size"
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-responsive/index.ts"
-      >
-
-      <mui-v-stack space="var(--space-700)">
-      
-        <story-card title="Basic">
-          <mui-responsive slot="body" breakpoint="600">
-            <mui-heading slot="showBelow" size="6">Mobile / Below 600</mui-heading>
-            <mui-heading slot="showAbove" size="6">Desktop / Above 600</mui-heading>
-          </mui-responsive>
-          <mui-code slot="footer">
-            &lt;mui-responsive breakpoint="600"&gt;
-            <br />
-            &nbsp;&nbsp;&lt;div slot="showAbove"&gt;...&lt;/div&gt;
-            <br />
-            &nbsp;&nbsp;&lt;div slot="showBelow"&gt;...&lt;/div&gt;
-            <br />
-            &lt;/mui-responsive&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Table to Mobile Layout">
-
-          <mui-responsive slot="body" breakpoint="1080">
-            <mui-h-stack slot="showAbove" space="16px" alignY="center">
-              ${l}
-            </mui-h-stack>
-            <div slot="showBelow">
-              ${o}
-            </div>
-          </mui-responsive>
-
-          <mui-code slot="footer">
-            &lt;mui-responsive breakpoint="600"&gt;
-            <br />
-            <br />
-            &nbsp;&nbsp;&lt;div slot="showAbove"&gt;
-            <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;&#x24;{ProgressTableView}
-            <br />
-            &nbsp;&nbsp;&lt;/div&gt;
-            <br />
-            <br />
-            &nbsp;&nbsp;&lt;div slot="showBelow"&gt;
-            <br />
-             &nbsp;&nbsp;&nbsp;&nbsp; &#x24;{ProgressSlatView}
-            <br />
-            &nbsp;&nbsp;&lt;/div&gt;
-            <br />
-            <br />
-            &lt;/mui-responsive&gt;
-          </mui-code>
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-responsive",r);