@inglorious/ui 1.0.1 → 2.0.0

package/src/examples/dashboard/primitive-section.js

@@ -1,13 +1,13 @@
 import { html } from "@inglorious/web"
 
-import { typography } from "../../data-display/typography/index.js"
-import { container } from "../../layout/container/index.js"
-import { flex } from "../../layout/flex/index.js"
-import { grid } from "../../layout/grid/index.js"
-import { card } from "../../surfaces/card/index.js"
+import { Typography } from "../../data-display/typography/index.js"
+import { Container } from "../../layout/container/index.js"
+import { Flex } from "../../layout/flex/index.js"
+import { Grid } from "../../layout/grid/index.js"
+import { Card } from "../../surfaces/card/index.js"
 import { getPrimitiveContent } from "./primitive-content.js"
 
-export const primitiveSection = {
+export const PrimitiveSection = {
   render(entity, api) {
     const router = api?.getEntity?.("router")
     const content = getPrimitiveContent(router?.path, entity)
@@ -24,31 +24,31 @@ export const primitiveSection = {
         : example?.preview
     const showEmpty = !content
 
-    return container.render({
+    return Container.render({
       maxWidth: "xl",
       padding: "lg",
       className: "iw-dashboard-container",
-      children: flex.render({
+      children: Flex.render({
         direction: "column",
         gap: "lg",
         children: [
-          flex.render({
+          Flex.render({
             direction: "column",
             gap: "xs",
             children: [
-              typography.render({
+              Typography.render({
                 variant: "h4",
                 children: showEmpty ? "Choose a Primitive" : name,
               }),
               category
-                ? typography.render({
+                ? Typography.render({
                     variant: "body2",
                     color: "secondary",
                     children: `Category: ${category}`,
                   })
                 : "",
               summary
-                ? typography.render({
+                ? Typography.render({
                     variant: "body1",
                     color: "secondary",
                     children: summary,
@@ -56,22 +56,22 @@ export const primitiveSection = {
                 : "",
             ],
           }),
-          card.render({
+          Card.render({
             padding: "xl",
-            children: flex.render({
+            children: Flex.render({
               align: "center",
               justify: "center",
               padding: "xl",
               className: "iw-primitive-placeholder",
               children: html`
                 <div style="text-align: center;">
-                  ${typography.render({
+                  ${Typography.render({
                     variant: "h6",
                     children: showEmpty
                       ? "Pick a primitive from the drawer to see details."
                       : `Documentation for ${name}`,
                   })}
-                  ${typography.render({
+                  ${Typography.render({
                     variant: "body1",
                     children:
                       description ??
@@ -80,7 +80,7 @@ export const primitiveSection = {
                   ${useCases.length
                     ? html`
                         <div style="margin-top: 16px; text-align: left;">
-                          ${typography.render({
+                          ${Typography.render({
                             variant: "body2",
                             color: "secondary",
                             children: "Common use cases",
@@ -99,26 +99,26 @@ export const primitiveSection = {
           }),
           showEmpty
             ? ""
-            : card.render({
+            : Card.render({
                 padding: "xl",
                 className: "iw-primitive-example",
-                children: flex.render({
+                children: Flex.render({
                   direction: "column",
                   gap: "md",
                   children: [
-                    typography.render({
+                    Typography.render({
                       variant: "h6",
                       children: "Example",
                     }),
-                    grid.render({
+                    Grid.render({
                       minColumnWidth: "18rem",
                       gap: "lg",
                       children: [
-                        flex.render({
+                        Flex.render({
                           direction: "column",
                           gap: "sm",
                           children: [
-                            typography.render({
+                            Typography.render({
                               variant: "body2",
                               color: "secondary",
                               children: "Code",
@@ -129,11 +129,11 @@ export const primitiveSection = {
                             "// Example coming soon."}</code></pre>`,
                           ],
                         }),
-                        flex.render({
+                        Flex.render({
                           direction: "column",
                           gap: "sm",
                           children: [
-                            typography.render({
+                            Typography.render({
                               variant: "body2",
                               color: "secondary",
                               children: "Result",

package/src/examples/dashboard/router.js

@@ -1,5 +1,5 @@
 import { setRoutes } from "@inglorious/web/router"
-export { router } from "@inglorious/web/router"
+export { Router } from "@inglorious/web/router"
 
 setRoutes({
   "/": "dashboard",

package/src/examples/dashboard/social-card.js

@@ -1,42 +1,42 @@
 import { chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
-import { divider } from "../../data-display/divider"
-import { materialIcon } from "../../data-display/material-icon"
-import { typography } from "../../data-display/typography"
-import { grid } from "../../layout/grid"
-import { card } from "../../surfaces/card"
+import { Divider } from "../../data-display/divider"
+import { MaterialIcon } from "../../data-display/material-icon"
+import { Typography } from "../../data-display/typography"
+import { Grid } from "../../layout/grid"
+import { Card } from "../../surfaces/card"
 
-export const socialCard = {
+export const SocialCard = {
   render(entity, api) {
-    return card.render({
+    return Card.render({
       className: "iw-dashboard-social-card",
       headerPadding: "none",
       header: html`
         <div class="iw-dashboard-social-cap ${entity.capClass}">
-          ${materialIcon.render({ name: entity.icon, size: "lg" })}
+          ${MaterialIcon.render({ name: entity.icon, size: "lg" })}
           <div class="iw-dashboard-social-chart">
             ${this.renderAreaSpark(entity, api)}
           </div>
         </div>
       `,
-      body: grid.render({
+      body: Grid.render({
         columns: "1fr auto 1fr",
         gap: "md",
         className: "iw-dashboard-social-stats",
         children: [
           html`<div>
-            ${typography.render({ variant: "h3", children: entity.top })}
-            ${typography.render({
+            ${Typography.render({ variant: "h3", children: entity.top })}
+            ${Typography.render({
               variant: "caption",
               children: entity.topLabel,
               color: "var(--iw-color-text-secondary)",
             })}
           </div>`,
-          divider.render({ orientation: "vertical" }),
+          Divider.render({ orientation: "vertical" }),
           html`<div>
-            ${typography.render({ variant: "h3", children: entity.bottom })}
-            ${typography.render({
+            ${Typography.render({ variant: "h3", children: entity.bottom })}
+            ${Typography.render({
               variant: "caption",
               children: entity.bottomLabel,
               color: "var(--iw-color-text-secondary)",

package/src/examples/dashboard/stat-card.js

@@ -1,14 +1,14 @@
 import { chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
-import { button } from "../../controls/button"
-import { materialIcon } from "../../data-display/material-icon"
-import { typography } from "../../data-display/typography"
-import { card } from "../../surfaces/card"
+import { Button } from "../../controls/button"
+import { MaterialIcon } from "../../data-display/material-icon"
+import { Typography } from "../../data-display/typography"
+import { Card } from "../../surfaces/card"
 
-export const statCard = {
+export const StatCard = {
   render(entity, api) {
-    return card.render({
+    return Card.render({
       className: `iw-dashboard-stat ${entity.className}`,
       bodyPadding: "none",
       body: html`
@@ -16,13 +16,13 @@ export const statCard = {
           <div class="iw-dashboard-stat-top">
             <div>
               <div class="iw-dashboard-stat-value">
-                ${typography.render({ variant: "h2", children: entity.value })}
+                ${Typography.render({ variant: "h2", children: entity.value })}
                 <span
-                  >(${typography.render({
+                  >(${Typography.render({
                     variant: "caption",
                     children: html`<span class="iw-dashboard-stat-change">
                       ${entity.change}
-                      ${materialIcon.render({
+                      ${MaterialIcon.render({
                         name: entity.direction,
                         size: "sm",
                       })}
@@ -30,17 +30,17 @@ export const statCard = {
                   })})</span
                 >
               </div>
-              ${typography.render({ children: entity.label })}
+              ${Typography.render({ children: entity.label })}
             </div>
           </div>
           <div class="iw-dashboard-stat-chart">
             ${this.renderStatChart(entity, api)}
           </div>
-          ${button.render({
+          ${Button.render({
             variant: "ghost",
             shape: "square",
             className: "iw-dashboard-stat-more",
-            children: materialIcon.render({ name: "more_vert", size: "lg" }),
+            children: MaterialIcon.render({ name: "more_vert", size: "lg" }),
             "aria-label": "More options",
           })}
         </div>

package/src/examples/dashboard/theme.js

@@ -6,7 +6,7 @@ import {
   nextTheme,
 } from "./theme-utils.js"
 
-export const theme = {
+export const Theme = {
   create(entity) {
     entity.theme ??= DEFAULTS.theme
     applyTheme(entity.theme, getMode())

package/src/examples/dashboard/traffic-card.js

@@ -1,36 +1,36 @@
 import { chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
-import { button } from "../../controls/button"
-import { buttonGroup } from "../../controls/button-group"
-import { materialIcon } from "../../data-display/material-icon"
-import { typography } from "../../data-display/typography"
-import { progress } from "../../feedback/progress"
-import { flex } from "../../layout/flex"
-import { grid } from "../../layout/grid"
-import { card } from "../../surfaces/card"
+import { Button } from "../../controls/button"
+import { ButtonGroup } from "../../controls/button-group"
+import { MaterialIcon } from "../../data-display/material-icon"
+import { Typography } from "../../data-display/typography"
+import { Progress } from "../../feedback/progress"
+import { Flex } from "../../layout/flex"
+import { Grid } from "../../layout/grid"
+import { Card } from "../../surfaces/card"
 import { trafficSeries, trafficSummary } from "./data"
 
-export const trafficCard = {
+export const TrafficCard = {
   render(entity, api) {
-    return card.render({
-      header: flex.render({
+    return Card.render({
+      header: Flex.render({
         justify: "between",
         align: "start",
         gap: "md",
         children: [
           html`<div>
-            ${typography.render({ variant: "h3", children: "Traffic" })}
-            ${typography.render({
+            ${Typography.render({ variant: "h3", children: "Traffic" })}
+            ${Typography.render({
               variant: "caption",
               children: "January - July 2023",
               color: "var(--iw-color-text-secondary)",
             })}
           </div>`,
-          flex.render({
+          Flex.render({
             gap: "md",
             children: [
-              buttonGroup.render({
+              ButtonGroup.render({
                 value: "month",
                 variant: "outline",
                 color: "secondary",
@@ -41,10 +41,10 @@ export const trafficCard = {
                   { id: "year", label: "Year" },
                 ],
               }),
-              button.render({
+              Button.render({
                 size: "md",
                 color: "primary",
-                children: materialIcon.render({ name: "download" }),
+                children: MaterialIcon.render({ name: "download" }),
                 "aria-label": "Download report",
               }),
             ],
@@ -56,22 +56,22 @@ export const trafficCard = {
           ${this.renderTrafficChart(entity, api)}
         </div>
       `,
-      footer: grid.render({
+      footer: Grid.render({
         minColumnWidth: "17rem",
         gap: "lg",
         children: [
           trafficSummary.map((item) =>
-            flex.render({
+            Flex.render({
               direction: "column",
               align: "center",
               gap: "sm",
               children: [
-                typography.render({
+                Typography.render({
                   children: item.label,
                   color: "var(--iw-color-text-secondary)",
                 }),
-                typography.render({ children: item.value, weight: 600 }),
-                progress.render({
+                Typography.render({ children: item.value, weight: 600 }),
+                Progress.render({
                   value: item.progress,
                   className: `iw-progress-${item.color}`,
                 }),

package/src/examples/dashboard/traffic-sales-card.js

@@ -1,31 +1,31 @@
 import { html } from "@inglorious/web"
 
-import { button } from "../../controls/button"
-import { avatar } from "../../data-display/avatar"
-import { badge } from "../../data-display/badge"
-import { icon } from "../../data-display/icon"
-import { materialIcon } from "../../data-display/material-icon"
-import { table } from "../../data-display/table"
-import { typography } from "../../data-display/typography"
-import { progress } from "../../feedback/progress"
-import { flex } from "../../layout/flex"
-import { grid } from "../../layout/grid"
-import { card } from "../../surfaces/card"
+import { Button } from "../../controls/button"
+import { Avatar } from "../../data-display/avatar"
+import { Badge } from "../../data-display/badge"
+import { Icon } from "../../data-display/icon"
+import { MaterialIcon } from "../../data-display/material-icon"
+import { Table } from "../../data-display/table"
+import { Typography } from "../../data-display/typography"
+import { Progress } from "../../feedback/progress"
+import { Flex } from "../../layout/flex"
+import { Grid } from "../../layout/grid"
+import { Card } from "../../surfaces/card"
 import { clientBars, sourceBars, userRows } from "./data"
 
-export const trafficSalesCard = {
+export const TrafficSalesCard = {
   render(entity, api) {
-    return card.render({
+    return Card.render({
       title: "Traffic & Sales",
       body: html`
-        ${grid.render({
+        ${Grid.render({
           columns: 2,
           gap: "lg",
           className: "iw-dashboard-sales-layout",
           children: [
             html`
               <div>
-                ${grid.render({
+                ${Grid.render({
                   columns: 2,
                   gap: "lg",
                   className: "iw-dashboard-kpi-grid",
@@ -51,27 +51,27 @@ export const trafficSalesCard = {
                   ],
                 })}
                 <hr class="iw-dashboard-divider" />
-                ${flex.render({
+                ${Flex.render({
                   direction: "column",
                   gap: "lg",
                   className: "iw-dashboard-progress-list",
                   children: clientBars.map(([day, first, second]) =>
-                    grid.render({
+                    Grid.render({
                       columns: "6rem 1fr",
                       gap: "lg",
                       align: "center",
                       className: "iw-dashboard-progress-row",
                       children: [
                         html`<span>${day}</span>`,
-                        flex.render({
+                        Flex.render({
                           direction: "column",
                           gap: "sm",
                           children: [
-                            progress.render({
+                            Progress.render({
                               value: first,
                               className: "iw-progress-info",
                             }),
-                            progress.render({
+                            Progress.render({
                               value: second,
                               className: "iw-progress-error",
                             }),
@@ -85,7 +85,7 @@ export const trafficSalesCard = {
             `,
             html`
               <div>
-                ${grid.render({
+                ${Grid.render({
                   columns: 2,
                   gap: "lg",
                   className: "iw-dashboard-kpi-grid",
@@ -107,30 +107,30 @@ export const trafficSalesCard = {
                   ],
                 })}
                 <hr class="iw-dashboard-divider" />
-                ${flex.render({
+                ${Flex.render({
                   direction: "column",
                   gap: "lg",
                   className: "iw-dashboard-progress-list",
                   children: sourceBars.map(
                     ([label, value, iconName, tone, metric, suffix]) => html`
                       <div>
-                        ${flex.render({
+                        ${Flex.render({
                           align: "center",
                           justify: "between",
                           gap: "lg",
                           children: [
-                            flex.render({
+                            Flex.render({
                               align: "center",
                               gap: "sm",
                               children: [
-                                materialIcon.render({
+                                MaterialIcon.render({
                                   name: iconName,
                                   size: "lg",
                                 }),
                                 html`<span>${label}</span>`,
                               ],
                             }),
-                            flex.render({
+                            Flex.render({
                               align: "center",
                               gap: "sm",
                               className: "iw-dashboard-progress-meta",
@@ -143,7 +143,7 @@ export const trafficSalesCard = {
                             }),
                           ],
                         })}
-                        ${progress.render({
+                        ${Progress.render({
                           value,
                           className: `iw-progress-${tone}`,
                         })}
@@ -158,7 +158,7 @@ export const trafficSalesCard = {
 
         <div style="height: var(--iw-space-5)"></div>
 
-        ${table.render({
+        ${Table.render({
           columns: [
             { id: "user", title: "User" },
             { id: "country", title: "Country" },
@@ -169,17 +169,17 @@ export const trafficSalesCard = {
           ],
           rows: userRows.map((row) => ({
             user: html`
-              ${flex.render({
+              ${Flex.render({
                 align: "center",
                 gap: "lg",
                 children: [
                   html`<span class="iw-dashboard-avatar">
-                    ${avatar.render({
+                    ${Avatar.render({
                       size: "lg",
                       color: "auto",
                       initials: row.initials,
                     })}
-                    ${badge.render({
+                    ${Badge.render({
                       shape: "circle",
                       ringWidth: "1px",
                       color: row.status,
@@ -200,11 +200,11 @@ export const trafficSalesCard = {
               ${row.country}
             </div>`,
             usage: html`
-              ${flex.render({
+              ${Flex.render({
                 direction: "column",
                 gap: "sm",
                 children: [
-                  flex.render({
+                  Flex.render({
                     justify: "between",
                     gap: "sm",
                     children: [
@@ -214,7 +214,7 @@ export const trafficSalesCard = {
                       >`,
                     ],
                   }),
-                  progress.render({
+                  Progress.render({
                     value: row.usage,
                     className: `iw-progress-${row.status}`,
                   }),
@@ -222,7 +222,7 @@ export const trafficSalesCard = {
               })}
             `,
             payment: html`<div class="iw-dashboard-payment">
-              ${icon.render({
+              ${Icon.render({
                 size: "lg",
                 children: html`<i
                   class="fa-brands fa-${row.payment}"
@@ -238,10 +238,10 @@ export const trafficSalesCard = {
             `,
             menu: html`
               <div class="iw-dashboard-menu-cell">
-                ${button.render({
+                ${Button.render({
                   variant: "ghost",
                   color: "secondary",
-                  children: materialIcon.render({ name: "more_vert" }),
+                  children: MaterialIcon.render({ name: "more_vert" }),
                   "aria-label": "Row actions",
                 })}
               </div>
@@ -255,12 +255,12 @@ export const trafficSalesCard = {
   renderKpi(_, { label, value, color }) {
     return html`
       <div class="iw-dashboard-kpi" style=${`color: ${color};`}>
-        ${typography.render({
+        ${Typography.render({
           variant: "caption",
           children: label,
           color: "var(--iw-color-text-secondary)",
         })}
-        ${typography.render({ variant: "h3", children: value })}
+        ${Typography.render({ variant: "h3", children: value })}
       </div>
     `
   },

package/src/feedback/alert/alert.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { alert } from "."
+import { Alert } from "."
 
 export default {
   title: "Feedback/Alert",
   tags: ["autodocs"],
-  render: createRender(alert),
+  render: createRender(Alert),
   argTypes: {
     title: { control: "text" },
     description: { control: "text" },

package/src/feedback/alert/index.js

@@ -1,3 +1,3 @@
-import { render } from "./template.js"
+import * as renderers from "./template.js"
 
-export const alert = { render }
+export const Alert = { ...renderers }

package/src/feedback/alert/template.js

@@ -8,6 +8,8 @@ import { classMap, html, ref } from "@inglorious/web"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
+ * Renders an alert message with optional title, description, icon, and actions.
+ * Supports severity and variant styles for info, success, warning, and error.
  * @param {AlertProps} props
  * @returns {TemplateResult}
  */

package/src/feedback/backdrop/backdrop.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { backdrop } from "."
+import { Backdrop } from "."
 
 export default {
   title: "Feedback/Backdrop",
   tags: ["autodocs"],
-  render: createRender(backdrop),
+  render: createRender(Backdrop),
   argTypes: {
     isOpen: { control: "boolean" },
     onClick: { action: "onClick" },

package/src/feedback/backdrop/index.js

@@ -1,3 +1,3 @@
-import { render } from "./template.js"
+import * as renderers from "./template.js"
 
-export const backdrop = { render }
+export const Backdrop = { ...renderers }

package/src/feedback/backdrop/template.js

@@ -6,6 +6,8 @@
 import { classMap, html, when } from "@inglorious/web"
 
 /**
+ * Renders a fullscreen backdrop overlay when open.
+ * Optionally wraps child content in a centered container.
  * @param {BackdropProps} props
  * @returns {TemplateResult | null}
  */