@muibook/components 1.0.0

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

@@ -0,0 +1,233 @@
+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

@@ -0,0 +1,177 @@
+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);