@muibook/components 1.0.2 → 1.0.3

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

@@ -1,233 +0,0 @@
-class m extends HTMLElement{constructor(){super();const o=this.attachShadow({mode:"open"}),n=`
-      :host { display: block; }
-    `,i=[{name:"slot",required:!0,type:"HTML attribute",options:"{text}, mui-icon-[name]",default:"",description:"Add text or an icon for the call-to-action. If using a custom icon, ensure it includes the mui-icon class to inherit styling."},{name:"variant",type:"string",options:"primary, secondary, tertiary, attention",default:"primary",description:"Describe the intent or mood of a message"},{name:"icon-only",type:"boolean",options:"icon-only",default:"",description:"Utilise a compact button with a mui-icon option."},{name:"style",type:"string",options:"Valid CSS",default:"",description:"You are able to use styles to add layout based CSS to the host element."},{name:"class",type:"CSS",options:"Valid CSS",default:"",description:"You are able to use add a classname to add layout based CSS to the host element."},{name:"part",type:"CSS",options:"E.g. mui-link::part(display)",default:"",description:"Controlled trust-based customisation for modifying internal aspects of a button."}],u=i.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(""),a=i.map((t,e)=>{const r=e===i.length-1?"last-child":"";return`
-          <mui-accordion-block 
-            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("");o.innerHTML=`
-      <style>${n}</style>
-
-      <story-template title="Buttons" 
-        description="Buttons are essential UI elements that trigger actions when clicked or tapped. They should be easily recognisable, provide clear feedback, and be accessible to all users."
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-570&t=fSFYVey9aCoE5oQa-1" 
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-button/index.ts"
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-
-        <spec-card title="Props">
-          <mui-responsive breakpoint="767" slot="body">
-            <story-type-table slot="showAbove">
-              ${u}
-            </story-type-table>
-            <mui-accordion-group exclusive slot="showBelow">
-              ${a}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-card>
-
-        <story-card title="Primary">
-        <mui-button variant="primary" slot="body">Submit</mui-button>
-          <mui-code slot="footer">
-            &lt;mui-button variant="primary"&gt;
-            <br />
-            &nbsp;&nbsp;...
-            <br />
-            &lt;/mui-button&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Secondary">
-        <mui-button variant="secondary" slot="body">Cancel</mui-button>
-          <mui-code slot="footer">
-            &lt;mui-button variant="secondary"&gt;
-            <br />
-            &nbsp;&nbsp;...
-            <br />
-            &lt;/mui-button&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Tertiary">
-         <mui-button variant="tertiary" slot="body">Cancel</mui-button>
-          <mui-code slot="footer">
-            &lt;mui-button variant="tertiary"&gt;
-            <br />
-            &nbsp;&nbsp;...
-            <br />
-            &lt;/mui-button&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Attention">
-          <mui-button variant="attention" slot="body">Delete</mui-button>
-          <mui-code slot="footer">
-            &lt;mui-button variant="attention"&gt;
-            <br />
-            &nbsp;&nbsp;...
-            <br />
-            &lt;/mui-button&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Button Group">
-          <mui-button-group right slot="body">
-            <mui-button variant="secondary">Cancel</mui-button>
-            <mui-button variant="primary">Submit</mui-button>
-          </mui-button-group>
-          <mui-code slot="footer">
-            &lt;mui-button-group right&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-button variant="secondary"&gt;...&lt;/mui-button&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-button variant="primary"&gt;...&lt;/mui-button&gt;
-            <br />
-            &lt;/mui-button-group&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Primary Icon-Only">
-          <mui-h-stack slot="body" space="var(--space-100)">
-            <mui-button variant="primary" icon-only>
-              <mui-icon-add></mui-icon-add>
-            </mui-button>
-            <mui-button variant="primary" icon-only>
-              <mui-icon-subtract></mui-icon-subtract>
-            </mui-button>
-            <mui-button variant="primary" icon-only>
-              <mui-icon-grid></mui-icon-grid>
-            </mui-button>
-            <mui-button variant="primary" icon-only>
-              <mui-icon-notification></mui-icon-notification>
-            </mui-button>
-            <mui-button variant="primary" icon-only>
-              <mui-icon-menu></mui-icon-menu>
-            </mui-button>
-            <mui-button variant="primary" icon-only>
-              <mui-icon-message></mui-icon-message>
-            </mui-button>
-          </mui-h-stack>
-          <mui-code slot="footer">
-            &lt;mui-button variant="primary" icon-only&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-icon-add&gt;&lt;/mui-icon-add&gt;
-            <br />
-            &lt;/mui-button&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Secondary Icon-Only">
-          <mui-h-stack slot="body" space="var(--space-100)">
-            <mui-button variant="secondary" icon-only>
-              <mui-icon-add variant="secondary" size="small"></mui-icon-add>
-            </mui-button>
-            <mui-button variant="secondary" icon-only>
-              <mui-icon-subtract></mui-icon-subtract>
-            </mui-button>
-            <mui-button variant="secondary" icon-only>
-              <mui-icon-grid></mui-icon-grid>
-            </mui-button>
-            <mui-button variant="secondary" icon-only>
-              <mui-icon-notification></mui-icon-notification>
-            </mui-button>
-            <mui-button variant="secondary" icon-only>
-              <mui-icon-menu></mui-icon-menu>
-            </mui-button>
-            <mui-button variant="secondary" icon-only>
-              <mui-icon-message></mui-icon-message>
-            </mui-button>
-          </mui-h-stack>
-          <mui-code slot="footer">
-            &lt;mui-button variant="secondary" icon-only&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-icon-add&gt;&lt;/mui-icon-add&gt;
-            <br />
-            &lt;/mui-button&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Tertiary Icon-Only">
-          <mui-h-stack slot="body" space="var(--space-100)">
-            <mui-button variant="tertiary" icon-only>
-              <mui-icon-add></mui-icon-add>
-            </mui-button>
-            <mui-button variant="tertiary" icon-only>
-              <mui-icon-subtract></mui-icon-subtract>
-            </mui-button>
-            <mui-button variant="tertiary" icon-only>
-              <mui-icon-grid></mui-icon-grid>
-            </mui-button>
-            <mui-button variant="tertiary" icon-only>
-              <mui-icon-notification></mui-icon-notification>
-            </mui-button>
-            <mui-button variant="tertiary" icon-only>
-              <mui-icon-menu></mui-icon-menu>
-            </mui-button>
-            <mui-button variant="tertiary" icon-only>
-              <mui-icon-message></mui-icon-message>
-            </mui-button>
-          </mui-h-stack>
-          <mui-code slot="footer">
-            &lt;mui-button variant="tertiary" icon-only&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-icon-add&gt;&lt;/mui-icon-add&gt;
-            <br />
-            &lt;/mui-button&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Attention Icon-Only">
-          <mui-h-stack slot="body" space="var(--space-100)">
-            <mui-button variant="attention" icon-only>
-              <mui-icon-add></mui-icon-add>
-            </mui-button>
-            <mui-button variant="attention" icon-only>
-              <mui-icon-subtract></mui-icon-subtract>
-            </mui-button>
-            <mui-button variant="attention" icon-only>
-              <mui-icon-grid></mui-icon-grid>
-            </mui-button>
-            <mui-button variant="attention" icon-only>
-              <mui-icon-notification></mui-icon-notification>
-            </mui-button>
-            <mui-button variant="attention" icon-only>
-              <mui-icon-menu></mui-icon-menu>
-            </mui-button>
-            <mui-button variant="attention" icon-only>
-              <mui-icon-message></mui-icon-message>
-            </mui-button>
-          </mui-h-stack>
-          <mui-code slot="footer">
-            &lt;mui-button variant="attention" icon-only&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-icon-add&gt;&lt;/mui-icon-add&gt;
-            <br />
-            &lt;/mui-button&gt;
-          </mui-code>
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-button",m);

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

@@ -1,177 +0,0 @@
-import"./mui-logo-mobile-DuEMz_jq.js";class t extends HTMLElement{constructor(){super();const a=this.attachShadow({mode:"open"}),r=`
-      :host { 
-        display: block;
-      }
-    `,e=`
-
-      <style>
-        .canvas {
-          background: var(--surface);
-          padding: var(--space-400);
-          margin-top: calc(var(--space-400) * -1);
-          margin-bottom: calc(var(--space-400) * -1);
-          margin-left: calc(var(--space-400) * -1);
-          margin-right: calc(var(--space-400) * -1);
-        }
-
-        .prompt-input { 
-          padding: var(--space-400);
-          padding-bottom: var(--space-200);
-          background: var(--surface-elevated-alpha);
-          border: var(--border-thin);
-          border-color: var(--form-default-border-color);
-          border-radius: var(--radius-300);
-        }
-
-        .prompt-toolbar::part(justify-content) {
-          justify-content: space-between;
-        }
-      </style>
-
-      <div class="canvas">
-        <mui-v-stack class="prompt-input" space="var(--space-200)">
-          <mui-input label="Default" hide-label placeholder="Reply to Mui..."></mui-input>
-
-          <mui-h-stack class="prompt-toolbar" space="var(--space-200)">
-            <mui-h-stack space="var(--space-000)">
-              <mui-icon-toggle rotate variant="tertiary">
-                <mui-icon-add slot="start"></mui-icon-add>
-                <mui-icon-close slot="end"></mui-icon-close>
-              </mui-icon-toggle>
-              <mui-button variant="tertiary" icon-only>
-                <mui-icon-globe></mui-icon-globe>
-              </mui-button>
-            </mui-h-stack>
-            <mui-h-stack space="var(--space-200)">
-              <mui-icon-toggle rotate variant="tertiary">
-                <mui-icon-up-arrow slot="start"></mui-icon-up-arrow>
-                <mui-icon-stop slot="end"></mui-icon-stop>
-              </mui-icon-toggle>
-            </mui-h-stack>
-          </mui-h-stack>
-        </mui-v-stack>
-      </div>
-    `,o=`
-      <style>
-        .conversation-background {
-          background: var(--surface);
-          padding: var(--space-400);
-          box-sizing: border-box;
-          margin-top: calc(var(--space-400) * -1);
-          margin-bottom: calc(var(--space-400) * -1);
-          margin-left: calc(var(--space-400) * -1);
-          margin-right: calc(var(--space-400) * -1);
-        }
-        .conversation-reply {
-          background: var(--surface-elevated-alpha);
-          padding: var(--space-400);
-          width: 100%;
-          box-sizing: border-box;
-          border: var(--border-thin);
-          border-radius: var(--radius-300);
-        }
-        .avatar {
-          width: 3.6rem;
-          flex: 0 0 3.6rem;
-          height: 3.6rem;
-          background: var(--mui-brand-300);
-          display: flex;
-          justify-content: center;
-          align-content: center;
-          border-radius: 3.6rem;
-        }
-        mui-logo-mobile { max-width: 1.6rem; margin-top: 4px; }
-
-      </style>
-      <div class="conversation-background">
-        <mui-h-stack class="conversation-reply" alignY="center" space="var(--space-400)">
-          <div class="avatar">
-            <mui-logo-mobile style="width: 100%; height: auto;"></mui-logo-mobile>
-          </div>
-          <mui-body size="small">Review my website <mui-link size="small" href="https://muibook.com" target="_blank">muibook.com</mui-link></mui-body>
-        </mui-h-stack>
-      </div>
-    `;a.innerHTML=`
-      <style>${r}</style>
-
-      <story-template 
-        title="Agent UI"
-        description="
-          Creating compositions provide the Design 
-          System a view of how the system is working and 
-          where it needs flexibility.
-        "
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-        <story-card 
-          title="Prompt Input" 
-          description="
-            A dark mode–ready language model prompt built from flexible system blocks."
-          >
-          <div slot="body">
-            ${e}
-          </div>
-          <mui-code slot="footer">
-            <br />
-            <mui-body size="x-small">Learn about <mui-Link size="x-small" href="/#/surface-design-tokens">Surface Tokens</mui-link></mui-body>
-            <br />
-            /* =================================== */
-            <br />
-            <br />
-            mui-button::part(background):hover {
-            <br />
-            &nbsp;&nbsp;background: var(--surface-recessed-alpha);
-            <br />
-            }
-            <br />
-            <br />
-            .prompt-input {
-            <br />
-            &nbsp;&nbsp;background: var(--surface-elevated-alpha);
-            <br />
-            &nbsp;&nbsp;border-color: var(--form-default-border-color);
-            <br />
-            &nbsp;&nbsp;...
-            <br />
-            }
-          </mui-code>
-        </story-card>
-
-        <story-card title="Conversation Bubble" description="A dark mode–ready conversation bubble built from flexible system blocks.">
-          <div slot="body">
-            ${o}
-          </div>
-          <mui-code slot="footer">
-            <br />
-            <mui-body size="x-small">Learn about <mui-Link size="x-small" href="/#/surface-design-tokens">Surface Tokens</mui-link></mui-body>
-            <br />
-            /* =================================== */
-            <br />
-            <br />
-            .conversation-background {
-            <br />
-            &nbsp;&nbsp;background: var(--surface);
-            <br />
-            &nbsp;&nbsp;...
-            <br />
-            }
-            <br />
-            <br />
-            .conversation-reply {
-            <br />
-            &nbsp;&nbsp;background: var(--surface-elevated-alpha);
-            <br />
-            &nbsp;&nbsp;border: var(--border-thin);
-            <br />
-            &nbsp;&nbsp;...
-            <br />
-            }
-          </mui-code>
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("comp-agent-ui",t);