@inglorious/ui 1.0.2 → 2.0.0

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

@@ -1,50 +1,50 @@
 import { html } from "@inglorious/web"
 
-import { button } from "../../controls/button/index.js"
-import { buttonGroup } from "../../controls/button-group/index.js"
-import { checkbox } from "../../controls/checkbox/index.js"
-import { combobox } from "../../controls/combobox/index.js"
-import { fab } from "../../controls/fab/index.js"
-import { iconButton } from "../../controls/icon-button/index.js"
-import { input } from "../../controls/input/index.js"
-import { radioGroup } from "../../controls/radio-group/index.js"
-import { rating } from "../../controls/rating/index.js"
-import { select } from "../../controls/select/index.js"
-import { slider } from "../../controls/slider/index.js"
-import { switchControl } from "../../controls/switch/index.js"
-import { avatar } from "../../data-display/avatar/index.js"
-import { badge } from "../../data-display/badge/index.js"
-import { chip } from "../../data-display/chip/index.js"
-import { dataGrid } from "../../data-display/data-grid/index.js"
-import { divider } from "../../data-display/divider/index.js"
-import { icon } from "../../data-display/icon/index.js"
-import { list } from "../../data-display/list/index.js"
-import { materialIcon } from "../../data-display/material-icon/index.js"
-import { table } from "../../data-display/table/index.js"
-import { tooltip } from "../../data-display/tooltip/index.js"
-import { typography } from "../../data-display/typography/index.js"
-import { alert } from "../../feedback/alert/index.js"
-import { backdrop } from "../../feedback/backdrop/index.js"
-import { dialog } from "../../feedback/dialog/index.js"
-import { progress } from "../../feedback/progress/index.js"
-import { skeleton } from "../../feedback/skeleton/index.js"
-import { snackbar } from "../../feedback/snackbar/index.js"
-import { container } from "../../layout/container/index.js"
-import { flex } from "../../layout/flex/index.js"
-import { grid } from "../../layout/grid/index.js"
-import { bottomNavigation } from "../../navigation/bottom-navigation/index.js"
-import { breadcrumbs } from "../../navigation/breadcrumbs/index.js"
-import { drawer } from "../../navigation/drawer/index.js"
-import { link } from "../../navigation/link/index.js"
-import { menu } from "../../navigation/menu/index.js"
-import { pagination } from "../../navigation/pagination/index.js"
-import { speedDial } from "../../navigation/speed-dial/index.js"
-import { stepper } from "../../navigation/stepper/index.js"
-import { tabs } from "../../navigation/tabs/index.js"
-import { accordion } from "../../surfaces/accordion/index.js"
-import { appBar } from "../../surfaces/app-bar/index.js"
-import { card } from "../../surfaces/card/index.js"
-import { paper } from "../../surfaces/paper/index.js"
+import { Button } from "../../controls/button/index.js"
+import { ButtonGroup } from "../../controls/button-group/index.js"
+import { Checkbox } from "../../controls/checkbox/index.js"
+import { Combobox } from "../../controls/combobox/index.js"
+import { Fab } from "../../controls/fab/index.js"
+import { IconButton } from "../../controls/icon-button/index.js"
+import { Input } from "../../controls/input/index.js"
+import { RadioGroup } from "../../controls/radio-group/index.js"
+import { Rating } from "../../controls/rating/index.js"
+import { Select } from "../../controls/select/index.js"
+import { Slider } from "../../controls/slider/index.js"
+import { Switch } from "../../controls/switch/index.js"
+import { Avatar } from "../../data-display/avatar/index.js"
+import { Badge } from "../../data-display/badge/index.js"
+import { Chip } from "../../data-display/chip/index.js"
+import { DataGrid } from "../../data-display/data-grid/index.js"
+import { Divider } from "../../data-display/divider/index.js"
+import { Icon } from "../../data-display/icon/index.js"
+import { List } from "../../data-display/list/index.js"
+import { MaterialIcon } from "../../data-display/material-icon/index.js"
+import { Table } from "../../data-display/table/index.js"
+import { Tooltip } from "../../data-display/tooltip/index.js"
+import { Typography } from "../../data-display/typography/index.js"
+import { Alert } from "../../feedback/alert/index.js"
+import { Backdrop } from "../../feedback/backdrop/index.js"
+import { Dialog } from "../../feedback/dialog/index.js"
+import { Progress } from "../../feedback/progress/index.js"
+import { Skeleton } from "../../feedback/skeleton/index.js"
+import { Snackbar } from "../../feedback/snackbar/index.js"
+import { Container } from "../../layout/container/index.js"
+import { Flex } from "../../layout/flex/index.js"
+import { Grid } from "../../layout/grid/index.js"
+import { BottomNavigation } from "../../navigation/bottom-navigation/index.js"
+import { Breadcrumbs } from "../../navigation/breadcrumbs/index.js"
+import { Drawer } from "../../navigation/drawer/index.js"
+import { Link } from "../../navigation/link/index.js"
+import { Menu } from "../../navigation/menu/index.js"
+import { Pagination } from "../../navigation/pagination/index.js"
+import { SpeedDial } from "../../navigation/speed-dial/index.js"
+import { Stepper } from "../../navigation/stepper/index.js"
+import { Tabs } from "../../navigation/tabs/index.js"
+import { Accordion } from "../../surfaces/accordion/index.js"
+import { AppBar } from "../../surfaces/app-bar/index.js"
+import { Card } from "../../surfaces/card/index.js"
+import { Paper } from "../../surfaces/paper/index.js"
 
 const categoryMeta = {
   layout: {
@@ -113,22 +113,22 @@ const primitiveDetailsByPath = {
       "Consistent guttering",
     ],
     example: {
-      code: `import { container } from "@inglorious/ui/container"
-import { typography } from "@inglorious/ui/typography"
+      code: `import { Container } from "@inglorious/ui/container"
+import { Typography } from "@inglorious/ui/typography"
 
-container.render({
+Container.render({
   maxWidth: "md",
   padding: "lg",
-  children: typography.render({
+  children: Typography.render({
     variant: "h6",
     children: "Content width locked to md"
   })
 })`,
       preview: () =>
-        container.render({
+        Container.render({
           maxWidth: "md",
           padding: "lg",
-          children: typography.render({
+          children: Typography.render({
             variant: "h6",
             children: "Content width locked to md",
           }),
@@ -141,24 +141,24 @@ container.render({
       "Flex composes horizontal and vertical stacks without custom CSS rules for spacing and alignment.",
     useCases: ["Toolbar rows", "Form stacks", "Inline actions"],
     example: {
-      code: `import { flex } from "@inglorious/ui/flex"
-import { paper } from "@inglorious/ui/paper"
+      code: `import { Flex } from "@inglorious/ui/flex"
+import { Paper } from "@inglorious/ui/paper"
 
-flex.render({
+Flex.render({
   align: "center",
   gap: "sm",
   children: [
-    paper.render({ padding: "sm", children: "Left" }),
-    paper.render({ padding: "sm", children: "Right" })
+    Paper.render({ padding: "sm", children: "Left" }),
+    Paper.render({ padding: "sm", children: "Right" })
   ]
 })`,
       preview: () =>
-        flex.render({
+        Flex.render({
           align: "center",
           gap: "sm",
           children: [
-            paper.render({ padding: "sm", children: "Left" }),
-            paper.render({ padding: "sm", children: "Right" }),
+            Paper.render({ padding: "sm", children: "Left" }),
+            Paper.render({ padding: "sm", children: "Right" }),
           ],
         }),
     },
@@ -169,28 +169,28 @@ flex.render({
       "Grid is ideal for dashboards and card layouts where column count varies by viewport.",
     useCases: ["Card galleries", "Metric grids", "Dashboard panels"],
     example: {
-      code: `import { grid } from "@inglorious/ui/grid"
-import { paper } from "@inglorious/ui/paper"
+      code: `import { Grid } from "@inglorious/ui/grid"
+import { Paper } from "@inglorious/ui/paper"
 
-grid.render({
+Grid.render({
   minColumnWidth: "10rem",
   gap: "sm",
   children: [
-    paper.render({ padding: "sm", children: "A" }),
-    paper.render({ padding: "sm", children: "B" }),
-    paper.render({ padding: "sm", children: "C" }),
-    paper.render({ padding: "sm", children: "D" })
+    Paper.render({ padding: "sm", children: "A" }),
+    Paper.render({ padding: "sm", children: "B" }),
+    Paper.render({ padding: "sm", children: "C" }),
+    Paper.render({ padding: "sm", children: "D" })
   ]
 })`,
       preview: () =>
-        grid.render({
+        Grid.render({
           minColumnWidth: "10rem",
           gap: "sm",
           children: [
-            paper.render({ padding: "sm", children: "A" }),
-            paper.render({ padding: "sm", children: "B" }),
-            paper.render({ padding: "sm", children: "C" }),
-            paper.render({ padding: "sm", children: "D" }),
+            Paper.render({ padding: "sm", children: "A" }),
+            Paper.render({ padding: "sm", children: "B" }),
+            Paper.render({ padding: "sm", children: "C" }),
+            Paper.render({ padding: "sm", children: "D" }),
           ],
         }),
     },
@@ -201,26 +201,26 @@ grid.render({
       "Button exposes stateful styles for primary, secondary, and destructive actions.",
     useCases: ["Primary CTAs", "Dialog actions", "Toolbar commands"],
     example: {
-      code: `import { button } from "@inglorious/ui/button"
+      code: `import { Button } from "@inglorious/ui/button"
 
-button.render({
+Button.render({
   variant: "default",
   color: "primary",
   children: "Save changes"
 })`,
       preview: () =>
         previewRow([
-          button.render({
+          Button.render({
             variant: "default",
             color: "primary",
             children: "Primary",
           }),
-          button.render({
+          Button.render({
             variant: "outline",
             color: "primary",
             children: "Outline",
           }),
-          button.render({
+          Button.render({
             variant: "ghost",
             color: "secondary",
             children: "Ghost",
@@ -234,9 +234,9 @@ button.render({
       "Button Group handles selection state while keeping controls visually attached.",
     useCases: ["Segmented filters", "Mode switches", "Batch actions"],
     example: {
-      code: `import { buttonGroup } from "@inglorious/ui/button-group"
+      code: `import { ButtonGroup } from "@inglorious/ui/button-group"
 
-buttonGroup.render({
+ButtonGroup.render({
   value: "week",
   buttons: [
     { id: "day", label: "Day" },
@@ -245,7 +245,7 @@ buttonGroup.render({
   ]
 })`,
       preview: () =>
-        buttonGroup.render({
+        ButtonGroup.render({
           value: "week",
           buttons: [
             { id: "day", label: "Day" },
@@ -261,19 +261,19 @@ buttonGroup.render({
       "Checkboxes allow multi-select within lists and forms while staying compact.",
     useCases: ["Bulk selection", "Settings toggles", "Agreement fields"],
     example: {
-      code: `import { checkbox } from "@inglorious/ui/checkbox"
+      code: `import { Checkbox } from "@inglorious/ui/checkbox"
 
-checkbox.render({
+Checkbox.render({
   label: "Send weekly report",
   isChecked: true
 })`,
       preview: () =>
         previewColumn([
-          checkbox.render({
+          Checkbox.render({
             label: "Send weekly report",
             isChecked: true,
           }),
-          checkbox.render({
+          Checkbox.render({
             label: "Email notifications",
             isChecked: false,
           }),
@@ -286,9 +286,9 @@ checkbox.render({
       "Combobox facilitates selection from large option sets with autocomplete, tag-based multi-select, and custom filtering.",
     useCases: ["Tag selection", "Data filtering", "Complex forms"],
     example: {
-      code: `import { combobox } from "@inglorious/ui/combobox"
+      code: `import { Combobox } from "@inglorious/ui/combobox"
 
-combobox.render({
+Combobox.render({
   label: "Frameworks",
   placeholder: "Select frameworks...",
   isMulti: true,
@@ -304,7 +304,7 @@ combobox.render({
   selectedValue: ["inglorious"]
 })`,
       preview: () =>
-        combobox.render({
+        Combobox.render({
           label: "Frameworks",
           placeholder: "Select frameworks...",
           isMulti: true,
@@ -327,16 +327,16 @@ combobox.render({
       "FABs emphasize the most important action in a view, especially on mobile.",
     useCases: ["Create actions", "Quick add", "Contextual primary"],
     example: {
-      code: `import { fab } from "@inglorious/ui/fab"
+      code: `import { Fab } from "@inglorious/ui/fab"
 
-fab.render({
+Fab.render({
   isExtended: true,
   children: "Create"
 })`,
       preview: () =>
         previewRow([
-          fab.render({ children: "+" }),
-          fab.render({ isExtended: true, children: "Create" }),
+          Fab.render({ children: "+" }),
+          Fab.render({ isExtended: true, children: "Create" }),
         ]),
     },
   },
@@ -346,23 +346,23 @@ fab.render({
       "Icon Button is optimized for toolbars and dense control clusters.",
     useCases: ["Toolbar controls", "Inline actions", "Overflow triggers"],
     example: {
-      code: `import { iconButton } from "@inglorious/ui/icon-button"
-import { materialIcon } from "@inglorious/ui/material-icon"
+      code: `import { IconButton } from "@inglorious/ui/icon-button"
+import { MaterialIcon } from "@inglorious/ui/material-icon"
 
-iconButton.render({
-  icon: materialIcon.render({ name: "settings" }),
+IconButton.render({
+  icon: MaterialIcon.render({ name: "settings" }),
   label: "Settings",
   variant: "ghost"
 })`,
       preview: () =>
         previewRow([
-          iconButton.render({
-            icon: materialIcon.render({ name: "settings" }),
+          IconButton.render({
+            icon: MaterialIcon.render({ name: "settings" }),
             label: "Settings",
             variant: "ghost",
           }),
-          iconButton.render({
-            icon: materialIcon.render({ name: "favorite" }),
+          IconButton.render({
+            icon: MaterialIcon.render({ name: "favorite" }),
             label: "Favorite",
             variant: "ghost",
           }),
@@ -375,9 +375,9 @@ iconButton.render({
       "Input exposes states for errors and hints while keeping layout consistent.",
     useCases: ["Forms", "Search fields", "Inline editing"],
     example: {
-      code: `import { input } from "@inglorious/ui/input"
+      code: `import { Input } from "@inglorious/ui/input"
 
-input.render({
+Input.render({
   label: "Email",
   inputType: "email",
   placeholder: "name@company.com",
@@ -385,14 +385,14 @@ input.render({
 })`,
       preview: () =>
         previewColumn([
-          input.render({
+          Input.render({
             label: "Email",
             inputType: "email",
             placeholder: "name@company.com",
             hint: "We will not share your email",
             value: "",
           }),
-          input.render({
+          Input.render({
             label: "Password",
             inputType: "password",
             placeholder: "••••••••",
@@ -407,9 +407,9 @@ input.render({
       "Radio Group ensures mutual exclusivity with explicit option labels.",
     useCases: ["Plan selection", "Single-choice forms", "Mode switching"],
     example: {
-      code: `import { radioGroup } from "@inglorious/ui/radio-group"
+      code: `import { RadioGroup } from "@inglorious/ui/radio-group"
 
-radioGroup.render({
+RadioGroup.render({
   label: "Billing",
   value: "annual",
   options: [
@@ -418,7 +418,7 @@ radioGroup.render({
   ]
 })`,
       preview: () =>
-        radioGroup.render({
+        RadioGroup.render({
           label: "Billing",
           value: "annual",
           options: [
@@ -434,13 +434,13 @@ radioGroup.render({
       "Rating captures qualitative feedback with a numeric value backing it.",
     useCases: ["Reviews", "Quality scoring", "Satisfaction"],
     example: {
-      code: `import { rating } from "@inglorious/ui/rating"
+      code: `import { Rating } from "@inglorious/ui/rating"
 
-rating.render({
+Rating.render({
   value: 4,
   max: 5
 })`,
-      preview: () => rating.render({ value: 4, max: 5 }),
+      preview: () => Rating.render({ value: 4, max: 5 }),
     },
   },
   "/controls/select": {
@@ -449,9 +449,9 @@ rating.render({
       "Select keeps forms tight while preserving clear option labels.",
     useCases: ["Filters", "Country selectors", "Form fields"],
     example: {
-      code: `import { select } from "@inglorious/ui/select"
+      code: `import { Select } from "@inglorious/ui/select"
 
-select.render({
+Select.render({
   value: "active",
   options: [
     { value: "active", label: "Active" },
@@ -460,7 +460,7 @@ select.render({
   ]
 })`,
       preview: () =>
-        select.render({
+        Select.render({
           value: "active",
           options: [
             { value: "active", label: "Active" },
@@ -476,16 +476,16 @@ select.render({
       "Slider is ideal for approximate values like volume or thresholds.",
     useCases: ["Range filters", "Preference tuning", "Threshold settings"],
     example: {
-      code: `import { slider } from "@inglorious/ui/slider"
+      code: `import { Slider } from "@inglorious/ui/slider"
 
-slider.render({
+Slider.render({
   label: "Volume",
   value: 32,
   min: 0,
   max: 100
 })`,
       preview: () =>
-        slider.render({ label: "Volume", value: 32, min: 0, max: 100 }),
+        Slider.render({ label: "Volume", value: 32, min: 0, max: 100 }),
     },
   },
   "/controls/switch": {
@@ -494,16 +494,16 @@ slider.render({
       "Switches represent live state and can be flipped without confirmation.",
     useCases: ["Feature flags", "Settings", "Live states"],
     example: {
-      code: `import { switchControl } from "@inglorious/ui/switch"
+      code: `import { Switch } from "@inglorious/ui/switch"
 
-switchControl.render({
+Switch.render({
   label: "Auto-sync",
   isChecked: true
 })`,
       preview: () =>
         previewColumn([
-          switchControl.render({ label: "Auto-sync", isChecked: true }),
-          switchControl.render({ label: "Offline mode", isChecked: false }),
+          Switch.render({ label: "Auto-sync", isChecked: true }),
+          Switch.render({ label: "Offline mode", isChecked: false }),
         ]),
     },
   },
@@ -513,16 +513,16 @@ switchControl.render({
       "Avatar supports automatic color hashing and multiple shapes/sizes.",
     useCases: ["User lists", "Assignees", "Account menus"],
     example: {
-      code: `import { avatar } from "@inglorious/ui/avatar"
+      code: `import { Avatar } from "@inglorious/ui/avatar"
 
-avatar.render({
+Avatar.render({
   initials: "JD",
   color: "auto"
 })`,
       preview: () =>
         previewRow([
-          avatar.render({ initials: "JD", color: "auto" }),
-          avatar.render({ src: "/transparent.png", shape: "square" }),
+          Avatar.render({ initials: "JD", color: "auto" }),
+          Avatar.render({ src: "/transparent.png", shape: "square" }),
         ]),
     },
   },
@@ -531,17 +531,17 @@ avatar.render({
     description: "Badges are lightweight chips for quick semantic emphasis.",
     useCases: ["Status tags", "Counts", "Category labels"],
     example: {
-      code: `import { badge } from "@inglorious/ui/badge"
+      code: `import { Badge } from "@inglorious/ui/badge"
 
-badge.render({
+Badge.render({
   color: "success",
   children: "LIVE"
 })`,
       preview: () =>
         previewRow([
-          badge.render({ color: "success", children: "LIVE" }),
-          badge.render({ color: "warning", children: "BETA" }),
-          badge.render({ color: "info", children: "NEW" }),
+          Badge.render({ color: "success", children: "LIVE" }),
+          Badge.render({ color: "warning", children: "BETA" }),
+          Badge.render({ color: "info", children: "NEW" }),
         ]),
     },
   },
@@ -550,17 +550,17 @@ badge.render({
     description: "Chips are best for quick filters or removable selections.",
     useCases: ["Tag lists", "Filter pills", "Multi-select"],
     example: {
-      code: `import { chip } from "@inglorious/ui/chip"
+      code: `import { Chip } from "@inglorious/ui/chip"
 
-chip.render({
+Chip.render({
   children: "Priority: High",
   color: "warning"
 })`,
       preview: () =>
         previewRow([
-          chip.render({ children: "Priority: High", color: "warning" }),
-          chip.render({ children: "Assigned", color: "success" }),
-          chip.render({ children: "Blocked", color: "error" }),
+          Chip.render({ children: "Priority: High", color: "warning" }),
+          Chip.render({ children: "Assigned", color: "success" }),
+          Chip.render({ children: "Blocked", color: "error" }),
         ]),
     },
   },
@@ -570,9 +570,9 @@ chip.render({
       "Data Grid supports structured datasets with built-in pagination and search hooks.",
     useCases: ["Admin tables", "Operational dashboards", "Data exports"],
     example: {
-      code: `import { dataGrid } from "@inglorious/ui/data-grid"
+      code: `import { DataGrid } from "@inglorious/ui/data-grid"
 
-dataGrid.render({
+DataGrid.render({
   rowId: "id",
   columns: [
     { id: "id", title: "ID", type: "number", isSortable: true },
@@ -590,7 +590,7 @@ dataGrid.render({
   pagination: { page: 0, pageSize: 3, pageSizes: [3, 6] }
 })`,
       preview: () =>
-        dataGrid.render({
+        DataGrid.render({
           rowId: "id",
           columns: [
             { id: "id", title: "ID", type: "number", isSortable: true },
@@ -615,14 +615,14 @@ dataGrid.render({
       "Divider adds visual rhythm without introducing heavy borders.",
     useCases: ["Section boundaries", "List grouping", "Sidebars"],
     example: {
-      code: `import { divider } from "@inglorious/ui/divider"
+      code: `import { Divider } from "@inglorious/ui/divider"
 
-divider.render({ orientation: "horizontal" })`,
+Divider.render({ orientation: "horizontal" })`,
       preview: () =>
         previewColumn([
-          typography.render({ variant: "body2", children: "Section A" }),
-          divider.render({ orientation: "horizontal" }),
-          typography.render({ variant: "body2", children: "Section B" }),
+          Typography.render({ variant: "body2", children: "Section A" }),
+          Divider.render({ orientation: "horizontal" }),
+          Typography.render({ variant: "body2", children: "Section B" }),
         ]),
     },
   },
@@ -632,16 +632,16 @@ divider.render({ orientation: "horizontal" })`,
       "Icon is a neutral wrapper for SVGs or glyphs within UI layouts.",
     useCases: ["Inline cues", "Status indicators", "UI affordances"],
     example: {
-      code: `import { icon } from "@inglorious/ui/icon"
+      code: `import { Icon } from "@inglorious/ui/icon"
 
-icon.render({
+Icon.render({
   size: "lg",
   children: "★"
 })`,
       preview: () =>
         previewRow([
-          icon.render({ size: "lg", children: "★" }),
-          icon.render({ size: "lg", children: "⚡" }),
+          Icon.render({ size: "lg", children: "★" }),
+          Icon.render({ size: "lg", children: "⚡" }),
         ]),
     },
   },
@@ -651,29 +651,29 @@ icon.render({
       "List supports nested items, selection state, and action affordances.",
     useCases: ["Navigation menus", "Activity feeds", "Result lists"],
     example: {
-      code: `import { list } from "@inglorious/ui/list"
+      code: `import { List } from "@inglorious/ui/list"
 
-list.render({
+List.render({
   items: [
     { id: "alpha", primary: "Alpha", secondary: "Ready" },
     { id: "beta", primary: "Beta", secondary: "Paused" }
   ]
 })`,
       preview: () =>
-        list.render({
+        List.render({
           isInset: true,
           items: [
             {
               id: "alpha",
               primary: "Alpha",
               secondary: "Ready",
-              icon: materialIcon.render({ name: "bolt", size: "sm" }),
+              icon: MaterialIcon.render({ name: "bolt", size: "sm" }),
             },
             {
               id: "beta",
               primary: "Beta",
               secondary: "Paused",
-              icon: materialIcon.render({ name: "pause", size: "sm" }),
+              icon: MaterialIcon.render({ name: "pause", size: "sm" }),
             },
           ],
         }),
@@ -685,14 +685,14 @@ list.render({
       "Material Icon renders Material Symbols with predefined size tokens.",
     useCases: ["Standard iconography", "Toolbar actions", "Menus"],
     example: {
-      code: `import { materialIcon } from "@inglorious/ui/material-icon"
+      code: `import { MaterialIcon } from "@inglorious/ui/material-icon"
 
-materialIcon.render({ name: "bolt", size: "lg" })`,
+MaterialIcon.render({ name: "bolt", size: "lg" })`,
       preview: () =>
         previewRow([
-          materialIcon.render({ name: "bolt", size: "lg" }),
-          materialIcon.render({ name: "settings", size: "lg" }),
-          materialIcon.render({ name: "layers", size: "lg" }),
+          MaterialIcon.render({ name: "bolt", size: "lg" }),
+          MaterialIcon.render({ name: "settings", size: "lg" }),
+          MaterialIcon.render({ name: "layers", size: "lg" }),
         ]),
     },
   },
@@ -702,9 +702,9 @@ materialIcon.render({ name: "bolt", size: "lg" })`,
       "Table is a minimal data layout when you do not need full grid features.",
     useCases: ["Reports", "Billing summaries", "Audit tables"],
     example: {
-      code: `import { table } from "@inglorious/ui/table"
+      code: `import { Table } from "@inglorious/ui/table"
 
-table.render({
+Table.render({
   isStriped: true,
   columns: [
     { id: "name", label: "Name" },
@@ -716,7 +716,7 @@ table.render({
   ]
 })`,
       preview: () =>
-        table.render({
+        Table.render({
           isStriped: true,
           columns: [
             { id: "name", label: "Name" },
@@ -735,19 +735,19 @@ table.render({
       "Tooltip keeps interfaces clean while still exposing contextual help.",
     useCases: ["Icon explanations", "Truncated labels", "Inline hints"],
     example: {
-      code: `import { tooltip } from "@inglorious/ui/tooltip"
+      code: `import { Tooltip } from "@inglorious/ui/tooltip"
 
-tooltip.render({
+Tooltip.render({
   isOpen: true,
   content: "Copy to clipboard",
   children: "Hover me"
 })`,
       preview: () =>
-        tooltip.render({
+        Tooltip.render({
           isOpen: true,
           content: "Copy to clipboard",
-          children: iconButton.render({
-            icon: materialIcon.render({ name: "content_copy" }),
+          children: IconButton.render({
+            icon: MaterialIcon.render({ name: "content_copy" }),
             label: "Copy",
             variant: "ghost",
           }),
@@ -760,20 +760,20 @@ tooltip.render({
       "Typography tokens enforce consistent sizing, weight, and color across surfaces.",
     useCases: ["Headings", "Body text", "Meta labels"],
     example: {
-      code: `import { typography } from "@inglorious/ui/typography"
+      code: `import { Typography } from "@inglorious/ui/typography"
 
-typography.render({
+Typography.render({
   variant: "h5",
   children: "Section title"
 })`,
       preview: () =>
         previewColumn([
-          typography.render({ variant: "h5", children: "Section title" }),
-          typography.render({
+          Typography.render({ variant: "h5", children: "Section title" }),
+          Typography.render({
             variant: "body1",
             children: "Body text uses a readable line height.",
           }),
-          typography.render({
+          Typography.render({
             variant: "body2",
             color: "secondary",
             children: "Secondary metadata label",
@@ -787,15 +787,15 @@ typography.render({
       "Alert surfaces contextual feedback without interrupting the flow.",
     useCases: ["Validation errors", "Success banners", "System warnings"],
     example: {
-      code: `import { alert } from "@inglorious/ui/alert"
+      code: `import { Alert } from "@inglorious/ui/alert"
 
-alert.render({
+Alert.render({
   title: "Payment failed",
   description: "Card expired on 04/24",
   severity: "error"
 })`,
       preview: () =>
-        alert.render({
+        Alert.render({
           title: "Payment failed",
           description: "Card expired on 04/24",
           severity: "error",
@@ -808,14 +808,14 @@ alert.render({
       "Backdrop dims the app surface and optionally displays a loading cue.",
     useCases: ["Blocking operations", "Modal focus", "Loading states"],
     example: {
-      code: `import { backdrop } from "@inglorious/ui/backdrop"
+      code: `import { Backdrop } from "@inglorious/ui/backdrop"
 
-backdrop.render({
+Backdrop.render({
   isOpen: true,
   children: "Processing..."
 })`,
       preview: () =>
-        backdrop.render({
+        Backdrop.render({
           isOpen: true,
           children: "Processing...",
         }),
@@ -827,27 +827,27 @@ backdrop.render({
       "Dialog interrupts flow for explicit confirmation or data entry.",
     useCases: ["Destructive actions", "Confirmations", "Focused forms"],
     example: {
-      code: `import { dialog } from "@inglorious/ui/dialog"
-import { button } from "@inglorious/ui/button"
+      code: `import { Dialog } from "@inglorious/ui/dialog"
+import { Button } from "@inglorious/ui/button"
 
-dialog.render({
+Dialog.render({
   isOpen: true,
   title: "Delete record",
   description: "This action cannot be undone.",
-  actions: button.render({ children: "Confirm" })
+  actions: Button.render({ children: "Confirm" })
 })`,
       preview: () =>
-        dialog.render({
+        Dialog.render({
           isOpen: true,
           title: "Delete record",
           description: "This action cannot be undone.",
           actions: previewRow([
-            button.render({
+            Button.render({
               variant: "ghost",
               color: "secondary",
               children: "Cancel",
             }),
-            button.render({
+            Button.render({
               variant: "default",
               color: "error",
               children: "Delete",
@@ -862,16 +862,16 @@ dialog.render({
       "Progress communicates activity for async or long-running operations.",
     useCases: ["Uploads", "Background tasks", "Step completion"],
     example: {
-      code: `import { progress } from "@inglorious/ui/progress"
+      code: `import { Progress } from "@inglorious/ui/progress"
 
-progress.render({
+Progress.render({
   variant: "linear",
   value: 45
 })`,
       preview: () =>
         previewColumn([
-          progress.render({ variant: "linear", value: 45 }),
-          progress.render({ variant: "circular", value: 72, size: 48 }),
+          Progress.render({ variant: "linear", value: 45 }),
+          Progress.render({ variant: "circular", value: 72, size: 48 }),
         ]),
     },
   },
@@ -880,16 +880,16 @@ progress.render({
     description: "Skeleton preserves layout while content is still loading.",
     useCases: ["Card placeholders", "List loading", "Async fetches"],
     example: {
-      code: `import { skeleton } from "@inglorious/ui/skeleton"
+      code: `import { Skeleton } from "@inglorious/ui/skeleton"
 
-skeleton.render({
+Skeleton.render({
   variant: "text",
   lines: 3
 })`,
       preview: () =>
         previewColumn([
-          skeleton.render({ variant: "text", lines: 3 }),
-          skeleton.render({ variant: "rect", height: 80 }),
+          Skeleton.render({ variant: "text", lines: 3 }),
+          Skeleton.render({ variant: "rect", height: 80 }),
         ]),
     },
   },
@@ -898,18 +898,18 @@ skeleton.render({
     description: "Snackbar provides quick feedback without blocking the user.",
     useCases: ["Save confirmations", "Undo prompts", "Background updates"],
     example: {
-      code: `import { snackbar } from "@inglorious/ui/snackbar"
+      code: `import { Snackbar } from "@inglorious/ui/snackbar"
 
-snackbar.render({
+Snackbar.render({
   isOpen: true,
   message: "Saved",
   action: "Undo"
 })`,
       preview: () =>
-        snackbar.render({
+        Snackbar.render({
           isOpen: true,
           message: "Saved",
-          action: link.render({ href: "#", children: "Undo" }),
+          action: Link.render({ href: "#", children: "Undo" }),
         }),
     },
   },
@@ -919,9 +919,9 @@ snackbar.render({
       "Bottom Navigation keeps primary destinations reachable on small screens.",
     useCases: ["Mobile apps", "Primary sections", "Quick switching"],
     example: {
-      code: `import { bottomNavigation } from "@inglorious/ui/bottom-navigation"
+      code: `import { BottomNavigation } from "@inglorious/ui/bottom-navigation"
 
-bottomNavigation.render({
+BottomNavigation.render({
   value: 1,
   actions: [
     { label: "Home", icon: "home" },
@@ -930,12 +930,12 @@ bottomNavigation.render({
   ]
 })`,
       preview: () =>
-        bottomNavigation.render({
+        BottomNavigation.render({
           value: 1,
           actions: [
-            { label: "Home", icon: materialIcon.render({ name: "home" }) },
-            { label: "Search", icon: materialIcon.render({ name: "search" }) },
-            { label: "Profile", icon: materialIcon.render({ name: "person" }) },
+            { label: "Home", icon: MaterialIcon.render({ name: "home" }) },
+            { label: "Search", icon: MaterialIcon.render({ name: "search" }) },
+            { label: "Profile", icon: MaterialIcon.render({ name: "person" }) },
           ],
         }),
     },
@@ -946,9 +946,9 @@ bottomNavigation.render({
       "Breadcrumbs communicate location and allow quick jumps to parent levels.",
     useCases: ["Nested pages", "Content hierarchies", "Admin paths"],
     example: {
-      code: `import { breadcrumbs } from "@inglorious/ui/breadcrumbs"
+      code: `import { Breadcrumbs } from "@inglorious/ui/breadcrumbs"
 
-breadcrumbs.render({
+Breadcrumbs.render({
   items: [
     { label: "Projects", href: "/projects" },
     { label: "Atlas" },
@@ -956,7 +956,7 @@ breadcrumbs.render({
   ]
 })`,
       preview: () =>
-        breadcrumbs.render({
+        Breadcrumbs.render({
           items: [
             { label: "Projects", href: "/projects" },
             { label: "Atlas" },
@@ -971,33 +971,33 @@ breadcrumbs.render({
       "Drawer anchors large navigation trees and can collapse for density.",
     useCases: ["Admin navigation", "Settings menus", "Content trees"],
     example: {
-      code: `import { drawer } from "@inglorious/ui/drawer"
-import { list } from "@inglorious/ui/list"
+      code: `import { Drawer } from "@inglorious/ui/drawer"
+import { List } from "@inglorious/ui/list"
 
-drawer.render({
+Drawer.render({
   isOpen: true,
   title: "Navigation",
-  children: list.render({ items: [
+  children: List.render({ items: [
     { id: "home", primary: "Dashboard" },
     { id: "reports", primary: "Reports" }
   ] })
 })`,
       preview: () =>
-        drawer.render({
+        Drawer.render({
           isOpen: true,
           hasBackdrop: false,
           title: "Navigation",
-          children: list.render({
+          children: List.render({
             items: [
               {
                 id: "home",
                 primary: "Dashboard",
-                icon: materialIcon.render({ name: "speed" }),
+                icon: MaterialIcon.render({ name: "speed" }),
               },
               {
                 id: "reports",
                 primary: "Reports",
-                icon: materialIcon.render({ name: "bar_chart" }),
+                icon: MaterialIcon.render({ name: "bar_chart" }),
               },
             ],
           }),
@@ -1010,16 +1010,16 @@ drawer.render({
       "Link standardizes color and underline behavior across surfaces.",
     useCases: ["Inline navigation", "Help links", "Secondary actions"],
     example: {
-      code: `import { link } from "@inglorious/ui/link"
+      code: `import { Link } from "@inglorious/ui/link"
 
-link.render({
+Link.render({
   href: "/docs",
   children: "Read documentation"
 })`,
       preview: () =>
         previewRow([
-          link.render({ href: "#", children: "Read documentation" }),
-          link.render({
+          Link.render({ href: "#", children: "Read documentation" }),
+          Link.render({
             href: "#",
             children: "Release notes",
             underline: "always",
@@ -1033,9 +1033,9 @@ link.render({
       "Menu surfaces grouped actions without cluttering the main UI.",
     useCases: ["Overflow menus", "Context actions", "Quick picks"],
     example: {
-      code: `import { menu } from "@inglorious/ui/menu"
+      code: `import { Menu } from "@inglorious/ui/menu"
 
-menu.render({
+Menu.render({
   isOpen: true,
   items: [
     { label: "Edit" },
@@ -1045,7 +1045,7 @@ menu.render({
   ]
 })`,
       preview: () =>
-        menu.render({
+        Menu.render({
           isOpen: true,
           items: [
             { label: "Edit" },
@@ -1061,13 +1061,13 @@ menu.render({
     description: "Pagination keeps dataset navigation fast and accessible.",
     useCases: ["Search results", "Data tables", "Archives"],
     example: {
-      code: `import { pagination } from "@inglorious/ui/pagination"
+      code: `import { Pagination } from "@inglorious/ui/pagination"
 
-pagination.render({
+Pagination.render({
   page: 2,
   count: 6
 })`,
-      preview: () => pagination.render({ page: 2, count: 6 }),
+      preview: () => Pagination.render({ page: 2, count: 6 }),
     },
   },
   "/navigation/speed-dial": {
@@ -1076,9 +1076,9 @@ pagination.render({
       "Speed Dial groups floating actions and reveals them on interaction.",
     useCases: ["Mobile shortcuts", "Create actions", "Context tools"],
     example: {
-      code: `import { speedDial } from "@inglorious/ui/speed-dial"
+      code: `import { SpeedDial } from "@inglorious/ui/speed-dial"
 
-speedDial.render({
+SpeedDial.render({
   isOpen: true,
   actions: [
     { label: "Add", icon: "+" },
@@ -1086,7 +1086,7 @@ speedDial.render({
   ]
 })`,
       preview: () =>
-        speedDial.render({
+        SpeedDial.render({
           isOpen: true,
           actions: [
             { label: "Add", icon: "+" },
@@ -1101,9 +1101,9 @@ speedDial.render({
       "Stepper communicates progress and ordering in multi-step tasks.",
     useCases: ["Checkout", "Onboarding", "Wizard flows"],
     example: {
-      code: `import { stepper } from "@inglorious/ui/stepper"
+      code: `import { Stepper } from "@inglorious/ui/stepper"
 
-stepper.render({
+Stepper.render({
   activeStep: 1,
   steps: [
     { label: "Details" },
@@ -1112,7 +1112,7 @@ stepper.render({
   ]
 })`,
       preview: () =>
-        stepper.render({
+        Stepper.render({
           activeStep: 1,
           steps: [
             { label: "Details" },
@@ -1128,9 +1128,9 @@ stepper.render({
       "Tabs keep related content in one location with explicit selection state.",
     useCases: ["Detail views", "Settings", "Section switches"],
     example: {
-      code: `import { tabs } from "@inglorious/ui/tabs"
+      code: `import { Tabs } from "@inglorious/ui/tabs"
 
-tabs.render({
+Tabs.render({
   value: 0,
   items: [
     { label: "Overview", panel: "Overview content" },
@@ -1138,19 +1138,19 @@ tabs.render({
   ]
 })`,
       preview: () =>
-        tabs.render({
+        Tabs.render({
           value: 0,
           items: [
             {
               label: "Overview",
-              panel: typography.render({
+              panel: Typography.render({
                 variant: "body2",
                 children: "Overview content",
               }),
             },
             {
               label: "Details",
-              panel: typography.render({
+              panel: Typography.render({
                 variant: "body2",
                 children: "Details content",
               }),
@@ -1165,16 +1165,16 @@ tabs.render({
       "Accordion reveals details on demand while keeping layouts compact.",
     useCases: ["FAQs", "Settings groups", "Detail panels"],
     example: {
-      code: `import { accordion } from "@inglorious/ui/accordion"
+      code: `import { Accordion } from "@inglorious/ui/accordion"
 
-accordion.render({
+Accordion.render({
   items: [
     { title: "Usage", content: "How to use it", isExpanded: true },
     { title: "API", content: "Props and handlers" }
   ]
 })`,
       preview: () =>
-        accordion.render({
+        Accordion.render({
           items: [
             {
               title: "Usage",
@@ -1192,20 +1192,20 @@ accordion.render({
       "App Bar anchors navigation and global actions in a consistent header.",
     useCases: ["App headers", "Section titles", "Global actions"],
     example: {
-      code: `import { appBar } from "@inglorious/ui/app-bar"
-import { button } from "@inglorious/ui/button"
+      code: `import { AppBar } from "@inglorious/ui/app-bar"
+import { Button } from "@inglorious/ui/button"
 
-appBar.render({
+AppBar.render({
   title: "Project Ops",
   subtitle: "SLA dashboard",
-  trailing: button.render({ children: "Share" })
+  trailing: Button.render({ children: "Share" })
 })`,
       preview: () =>
-        appBar.render({
+        AppBar.render({
           title: "Project Ops",
           subtitle: "SLA dashboard",
-          leading: materialIcon.render({ name: "menu" }),
-          trailing: button.render({
+          leading: MaterialIcon.render({ name: "menu" }),
+          trailing: Button.render({
             variant: "ghost",
             color: "secondary",
             children: "Share",
@@ -1219,18 +1219,18 @@ appBar.render({
       "Card provides a flexible surface with optional header and footer sections.",
     useCases: ["Dashboard panels", "Content previews", "Summary blocks"],
     example: {
-      code: `import { card } from "@inglorious/ui/card"
+      code: `import { Card } from "@inglorious/ui/card"
 
-card.render({
+Card.render({
   title: "Weekly report",
   subtitle: "Updated 2h ago",
   children: "View metrics and KPIs"
 })`,
       preview: () =>
-        card.render({
+        Card.render({
           title: "Weekly report",
           subtitle: "Updated 2h ago",
-          children: typography.render({
+          children: Typography.render({
             variant: "body2",
             children: "View metrics and KPIs",
           }),
@@ -1243,16 +1243,16 @@ card.render({
       "Paper is the base surface primitive for sections and layout regions.",
     useCases: ["Section backgrounds", "Inset panels", "Content blocks"],
     example: {
-      code: `import { paper } from "@inglorious/ui/paper"
+      code: `import { Paper } from "@inglorious/ui/paper"
 
-paper.render({
+Paper.render({
   padding: "md",
   children: "Surface content"
 })`,
       preview: () =>
-        paper.render({
+        Paper.render({
           padding: "md",
-          children: typography.render({
+          children: Typography.render({
             variant: "body2",
             children: "Surface content",
           }),