@muibook/components 1.0.1 → 1.0.3

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

@@ -1,96 +0,0 @@
-class a extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"}),i=`
-      :host { display: block; }
-    `,o=[{name:"slot",required:!0,type:"HTML attribute",options:"mui-body, mui-icons-[name], elements",default:"",description:"Slot in text, icons or other appropriate micro compositions to support form experiences."}],s=o.map(t=>`
-          <story-type-row
-            ${t.required?"required":""}
-            name="${t.name}"
-            type="${t.type}" 
-            options="${t.options||""}"
-            default="${t.default||""}"
-            description="${t.description}">
-          </story-type-row>
-        `).join(""),n=o.map((t,d)=>{const r=d===o.length-1?"last-child":"";return`
-            <mui-accordion-block
-              style="position: relative; z-index: 1;" 
-              size="medium" 
-              heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)} 
-              ${r}>
-              <story-type-slat
-                slot="detail"
-                ${t.required?"required":""}
-                name="${t.name}"
-                type="${t.type}" 
-                options="${t.options||""}"
-                default="${t.default||""}"
-                description="${t.description}">
-              </story-type-slat>
-            </mui-accordion-block>
-          `}).join("");e.innerHTML=`
-      <style>${i}</style>
-
-      <story-template 
-        title="Add On"
-        description="Enhance form inputs by using mui-addon to display supplementary information like units, prefixes, or suffixes."
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-addon/index.ts"
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=133-588&t=a1UUlxRE4ZIJUKwJ-1"
-      >
-
-      <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">
-              ${n}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-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>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-addon",a);

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

@@ -1,257 +0,0 @@
-class o extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),l=`
-      :host { display: block; }
-    `,s=[{name:"options",required:!0,type:"array",options:"[{...}]",default:"",description:"A JSON-encoded string representing the options for the select dropdown. Each option has a value and label."},{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:"Ensures the label is accessible to screen readers while visually hiding it to avoid redundancy"},{name:"disabled",type:"boolean",options:"disabled",default:"",description:"Disable the select"},{name:"name",type:"string",options:"{text}",default:"",description:"The name attribute is used when submitting forms."},{name:"value",type:"string",options:"{text}",default:"",description:"Define which option is selected by default."}],n=s.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(""),b=s.map((e,i)=>{const a=i===s.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)} 
-              ${a}>
-              <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("");t.innerHTML=`
-      <style>${l}</style>
-
-      <story-template
-        title="Select" 
-        description="A versatile dropdown component for selecting from a list of options, supporting customisable styles and accessibility features."
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-select/index.ts"
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=117-2068&t=GMqx21isUVAMpLJp-1"
-        accessibility="
-          A label is required for screen reader support, describing the purpose of the select.;
-          If hide-label is used, the label is visually hidden but still accessible via aria-label.;
-          The label and select are linked using for and id attributes. If no id is provided, one is generated.;
-          Keyboard users see a clear focus style when navigating.;
-          The disabled attribute is native and 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">
-              ${n}
-            </story-type-table>
-            <mui-accordion-group exclusive slot="showBelow">
-              ${b}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-card>
-
-
-        <story-card title="Default" description="A select requires a list of options.">
-          <div slot="body">
-            <mui-select
-              label="Default"
-              options='[
-                {"value": "default", "label": "Mui"},
-                {"value": "jal", "label": "JAL"},
-                {"value": "ana", "label": "ANA"},
-                {"value": "mono", "label": "Mono"}
-              ]'>
-            </mui-select>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-select label="Default"
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;options='[
-              <br />
-                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "default", "label": "Mui"},
-                <br />
-                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "jal", "label": "JAL"},
-                <br />
-                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "ana", "label": "ANA"},
-                <br />
-                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "mono", "label": "Mono"}
-                <br />
-              &nbsp;&nbsp;]'&gt;
-              <br />
-            &lt;/mui-select&gt;
-
-          </mui-code>
-        </story-card>
-
-        <story-card title="Hide Label" description="Ensures the label is accessible to screen readers while visually hiding it to avoid redundancy.">
-          <div slot="body">
-            <mui-select 
-              label="Density"
-              hide-label
-              options='[
-                {"value": "spacious", "label": "Spacious"},
-                {"value": "compact", "label": "Compact"}
-              ]'>
-            </mui-select>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-select
-            <br />
-              &nbsp;&nbsp;label="Brand"
-              <br />
-              &nbsp;&nbsp;hide-label
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;options='[
-              <br />
-                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "spacious", "label": "Spacious"},
-                <br />
-                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "compact", "label": "Compact"}
-                <br />
-              &nbsp;&nbsp;]'&gt;
-              <br />
-            &lt;/mui-select&gt;
-
-          </mui-code>
-        </story-card>
-
-
-        <story-card title="Value" description="Define which option is selected by default.">
-          <div slot="body">
-            <mui-select
-              value="compact"
-              label="Density"
-              hide-label
-              options='[
-                {"value": "spacious", "label": "Spacious"},
-                {"value": "compact", "label": "Compact"}
-              ]'>
-            </mui-select>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-select
-            <br />
-              &nbsp;&nbsp;label="Brand"
-              <br />
-              &nbsp;&nbsp;hide-label
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;options='[
-              <br />
-                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "spacious", "label": "Spacious"},
-                <br />
-                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "compact", "label": "Compact"}
-                <br />
-              &nbsp;&nbsp;]'&gt;
-              <br />
-            &lt;/mui-select&gt;
-
-          </mui-code>
-        </story-card>
-
-        <story-card title="Disabled">
-          <div slot="body">
-            <mui-select
-              disabled
-              label="Brand"
-              hide-label
-              options='[
-                {"value": "spacious", "label": "Spacious"},
-                {"value": "compact", "label": "Compact"}
-              ]'>
-            </mui-select>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-select
-
-            <br />
-              &nbsp;&nbsp;disabled
-              <br />
-              &nbsp;&nbsp;label="Brand"
-              <br />
-              &nbsp;&nbsp;hide-label
-              <br />
-              &nbsp;&nbsp;&nbsp;&nbsp;options='[
-              <br />
-                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "spacious", "label": "Spacious"},
-                <br />
-                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "compact", "label": "Compact"}
-                <br />
-              &nbsp;&nbsp;]'&gt;
-              <br />
-            &lt;/mui-select&gt;
-
-          </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>
-
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-select",o);

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

@@ -1,67 +0,0 @@
-class n extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),i=`
-      :host { display: block; }
-    `,t=[{name:"acceptedFileTypes",type:"string",options:"Any",default:"",description:"Comma-separated list of accepted file types (.jpg, .pdf)"},{name:"currentFileName",type:"string",options:"Any",default:"",description:"Initial text to display when no file has been selected."}],o=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,a)=>{const d=a===t.length-1?"last-child":"";return`
-          <mui-accordion-block 
-            size="medium" 
-            heading=${e.name.charAt(0).toUpperCase()+e.name.slice(1)} 
-            ${d}>
-            <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("");s.innerHTML=`
-      <style>${i}</style>
-
-      <story-template
-        title="File Upload"
-        description="A simple file input that displays the selected file name and emits a file-upload event."
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-file-upload/index.ts"
-      >
-
-        <mui-v-stack space="var(--space-700)">
-
-          <spec-card title="Props">
-            <mui-responsive breakpoint="768" slot="body">
-              <story-type-table slot="showAbove">
-                ${o}
-              </story-type-table>
-              <mui-accordion-group exclusive slot="showBelow">
-                ${l}
-              </mui-accordion-group>
-            </mui-responsive>
-          </spec-card>
-
-          <story-card 
-            title="Default" 
-          >
-            <mui-file-upload slot="body"
-              acceptedFileTypes=".pdf,.jpg"
-              currentFileName="No file selected"
-            ></mui-file-upload>
-            <mui-code slot="footer">
-              &lt;mui-file-upload<br />
-              &nbsp;&nbsp;acceptedFileTypes=".pdf,.jpg"<br />
-              &nbsp;&nbsp;currentFileName="No file selected"<br />
-              &gt;&lt;/mui-file-upload&gt;
-            </mui-code>
-          </story-card>
-
-        </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-file-upload",n);

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

@@ -1,133 +0,0 @@
-const s="/mui-tokens.jpg";class t extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"}),i=`
-      :host { display: block; }
-    
-      .config::part(display) {
-        grid-template-columns: 1fr;
-      }
-
-      @media (min-width: 1230px) {
-        .config::part(display) {
-          grid-template-columns: minmax(0, 50ch) 400px;
-          gap: 7.2rem;
-          justify-content: space-between;
-          align-items: start;
-        }
-      }
-
-      @media (min-width: 1390px) {
-        .config::part(display) {
-          grid-template-columns: minmax(0, 50ch) 500px;
-          gap: 9.6rem;
-        }
-      }
-
-    `;e.innerHTML=`
-      <style>${i}</style>
-
-      <story-template 
-        title="Theme Setup"
-        description="Connect your theme — token-powered, brand-ready, and dark mode friendly."
-        github="https://github.com/michaeltrilford/create-mui-app/blob/main/src/mui-styles/mui-tokens.css"
-      >
-
-
-      <mui-v-stack space="var(--space-700)">
-
-        <page-card>
-          
-          <mui-grid slot="body" class="config"  space="var(--space-400)">
-
-            <mui-v-stack space="var(--space-600)">
-
-              <mui-v-stack space="var(--space-400)">
-                <mui-body size="large">Configure your brand’s colors, typography, and spacing — without touching 
-                component code. Start with the GitHub template and plan how your brand will come to life, including 
-                support for both light and dark mode.</mui-body>
-              </mui-v-stack>
-
-              <mui-v-stack space="var(--space-300)">
-                <mui-heading level="3" size="5">Design tokens</mui-heading>
-                <mui-body size="medium">
-                  <mui-link size="medium" href="#/base-design-tokens">Base</mui-link>, 
-                  <mui-link size="medium" href="#/semantic-design-tokens">Semantic</mui-link>, 
-                  <mui-link size="medium" href="#/contextual-design-tokens">Contextual</mui-link>, 
-                  <mui-link size="medium" href="#/surface-design-tokens">Surface</mui-link> and 
-                  <mui-link size="medium" href="#/components-design-tokens">Component</mui-link> tokens.</mui-body>
-              </mui-v-stack>
-
-              <mui-v-stack space="var(--space-300)">
-                <mui-heading level="3" size="5">Brand primitives</mui-heading>
-                <mui-body size="medium">Set your brand’s core design tokens such as color palettes, font stacks, 
-                and spacing values. These primitives serve as the building blocks for every component.</mui-body>
-              </mui-v-stack>
-
-              <mui-v-stack space="var(--space-300)">
-                <mui-heading level="3" size="5">Light mode</mui-heading>
-                <mui-body size="medium">Apply your brand primitives to the light color scheme. Ensure accessibility 
-                and visual harmony by testing components against your chosen values.</mui-body>
-              </mui-v-stack>
-
-              <mui-v-stack space="var(--space-300)">
-                <mui-heading level="3" size="5">Dark mode</mui-heading>
-                <mui-body size="medium">Customise the dark theme by adjusting contrast, brightness, and other token 
-                values to provide a cohesive experience in low-light environments.</mui-body>
-              </mui-v-stack>
-
-              <mui-v-stack space="var(--space-300)">
-                <mui-heading level="3" size="5">Set the foundation</mui-heading>
-                <mui-body size="medium">Establish consistency across your product by using the template to unify 
-                theming across all modes. Fork the repository and start customizing your theme today.</mui-body>
-              </mui-v-stack>
-
-            </mui-v-stack>
-
-            <mui-image>
-              <img slot="image" src="${s}" alt="Author Tokens" />
-              <figcaption slot="caption">mui-styles/mui-tokens.css</figcaption>
-            </mui-image> 
-          </mui-grid>
-
-          <mui-code slot="footer">
-            <br />
-            THEME STRUCTURE:
-            <br />
-            <br />
-            &#47;* ===================================== *&#47;<br />
-            &#47;* 1. BRAND PRIMITIVES<br />
-            &#47;* ===================================== *&#47;<br />
-            :where(html) {<br />
-            &nbsp;&nbsp;...<br />
-            }<br />
-            <br />
-            &#47;* ===================================== *&#47;<br />
-            &#47;* 2. LIGHT MODE <br />
-            &#47;* ===================================== *&#47;<br />
-            html[data-theme=&#39;light&#39;] {<br />
-            &nbsp;&nbsp;...<br />
-            }<br />
-            <br />
-            &#47;* ===================================== *&#47;<br />
-            &#47;* 3. DARK MODE<br />
-            &#47;* ===================================== *&#47;<br />
-            html[data-theme=&#39;dark&#39;] {<br />
-            &nbsp;&nbsp;...<br />
-            }<br />
-            <br />
-            &#47;* ===================================== *&#47;<br />
-            &#47;* 4. SET THE FOUNDATION<br />
-            &#47;* ===================================== *&#47;<br />
-            :where(html) {<br />
-            &nbsp;&nbsp;...<br />
-            }<br />
-            <br />
-            <br />
-
-          </mui-code>
-
-
-        </page-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("theme-setup",t);