@malilion/block-ui-react 0.3.0 → 0.4.0

package/dist/index.js

@@ -19,6 +19,7 @@ import { BlockRadio, BlockRadioGroup } from "./components/forms/BlockRadio/Block
 import { BlockToggle } from "./components/forms/BlockToggle/BlockToggle.js";
 import { clamp, formatNumber, ratio } from "./utils/number.js";
 import { BlockSlider } from "./components/forms/BlockSlider/BlockSlider.js";
+import { NumberInput } from "./components/forms/NumberInput/NumberInput.js";
 import { durabilityLevel } from "./components/inventory/DurabilityBar/DurabilityBar.utils.js";
 import { DurabilityBar } from "./components/inventory/DurabilityBar/DurabilityBar.js";
 import { describeItemStack } from "./components/inventory/ItemStack/ItemStack.utils.js";
@@ -88,6 +89,9 @@ import { tooltipPlacements } from "./components/display/BlockTooltip/BlockToolti
 import { BlockTable } from "./components/display/BlockTable/BlockTable.js";
 import { skillState } from "./components/display/SkillTree/SkillTree.utils.js";
 import { SkillTree } from "./components/display/SkillTree/SkillTree.js";
+import { initials } from "./components/display/Avatar/Avatar.utils.js";
+import { Avatar } from "./components/display/Avatar/Avatar.js";
+import { avatarStatuses } from "./components/display/Avatar/Avatar.types.js";
 import { ChatWindow } from "./components/social/ChatWindow/ChatWindow.js";
 import { chatMessageTypes } from "./components/social/ChatWindow/ChatWindow.types.js";
 import { suggestCommands } from "./components/social/CommandConsole/CommandConsole.utils.js";
@@ -104,10 +108,15 @@ import { BlockStack } from "./components/layout/BlockStack/BlockStack.js";
 import { stackGaps } from "./components/layout/BlockStack/BlockStack.types.js";
 import { BlockDivider } from "./components/layout/BlockDivider/BlockDivider.js";
 import { dividerVariants } from "./components/layout/BlockDivider/BlockDivider.types.js";
+import { Accordion } from "./components/layout/Accordion/Accordion.js";
 import { alertVariants } from "./components/feedback/Alert/BlockAlert.types.js";
 import { useFocusTrap } from "./hooks/useFocusTrap.js";
 import { BlockModal } from "./components/feedback/Modal/BlockModal.js";
 import { ConfirmDialog } from "./components/feedback/ConfirmDialog/ConfirmDialog.js";
 import { progressVariants } from "./components/feedback/Progress/BlockProgress.types.js";
 import { BlockLoading } from "./components/feedback/Loading/BlockLoading.js";
-export { AchievementCard, Anvil, ArmorBar, BiomeIndicator, BlockAlert, BlockBadge, BlockButton, BlockCard, BlockCheckbox, BlockDivider, BlockInput, BlockLoading, BlockMenu, BlockModal, BlockPagination, BlockPanel, BlockProgress, BlockRadio, BlockRadioGroup, BlockSelect, BlockSidebar, BlockSlider, BlockStack, BlockTable, BlockTabs, BlockTextarea, BlockToaster, BlockToggle, BlockTooltip, BlockUIProvider, BossBar, Breadcrumb, BrewingStand, ChatWindow, CommandConsole, ConfirmDialog, CoordinatesHUD, CraftingGrid, CraftingResult, CraftingSlot, CraftingTable, DEFAULT_TOAST_DURATION, DayNightIndicator, DurabilityBar, EnchantingTable, Furnace, HealthBar, Hotbar, HotbarNavigation, HungerBar, IconButton, Inventory, InventoryGrid, InventorySection, InventorySlot, ItemStack, ItemTooltip, MiniMap, PlayerCard, PlayerHUD, QuestCard, RecipeBook, Scoreboard, ServerBrowser, ServerCard, SidebarItem, SkillTree, TradingUI, WeatherIndicator, WorldBrowser, WorldCard, XPBar, alertVariants, anvilCostState, badgeVariants, biomeTypes, blockButtonVariants, bossBarColors, bossBarSegments, brewingStates, browseServers, browseWorlds, cardMaterials, chatMessageTypes, clamp, compassName, consoleEntryKinds, cx, dayPhase, describeItemStack, describeMarker, dividerVariants, durabilityLevel, facings, filterRecipes, formatClock, formatNumber, furnaceStates, getBrewingState, getFurnaceState, getPaginationRange, itemRarities, miniMapMarkerKinds, miniMapTerrain, normalizeRarity, pingQuality, progressVariants, ratio, skillState, stackGaps, suggestCommands, toast, tooltipPlacements, useBlockUI, useControllableState, useDigitHotkeys, useFocusTrap, useMediaQuery, usePortalContainer, useToasts, villagerLevels, weatherTypes };
+import { Drawer } from "./components/feedback/Drawer/Drawer.js";
+import { EmptyState } from "./components/feedback/EmptyState/EmptyState.js";
+import { Skeleton } from "./components/feedback/Skeleton/Skeleton.js";
+import { skeletonVariants } from "./components/feedback/Skeleton/Skeleton.types.js";
+export { Accordion, AchievementCard, Anvil, ArmorBar, Avatar, BiomeIndicator, BlockAlert, BlockBadge, BlockButton, BlockCard, BlockCheckbox, BlockDivider, BlockInput, BlockLoading, BlockMenu, BlockModal, BlockPagination, BlockPanel, BlockProgress, BlockRadio, BlockRadioGroup, BlockSelect, BlockSidebar, BlockSlider, BlockStack, BlockTable, BlockTabs, BlockTextarea, BlockToaster, BlockToggle, BlockTooltip, BlockUIProvider, BossBar, Breadcrumb, BrewingStand, ChatWindow, CommandConsole, ConfirmDialog, CoordinatesHUD, CraftingGrid, CraftingResult, CraftingSlot, CraftingTable, DEFAULT_TOAST_DURATION, DayNightIndicator, Drawer, DurabilityBar, EmptyState, EnchantingTable, Furnace, HealthBar, Hotbar, HotbarNavigation, HungerBar, IconButton, Inventory, InventoryGrid, InventorySection, InventorySlot, ItemStack, ItemTooltip, MiniMap, NumberInput, PlayerCard, PlayerHUD, QuestCard, RecipeBook, Scoreboard, ServerBrowser, ServerCard, SidebarItem, Skeleton, SkillTree, TradingUI, WeatherIndicator, WorldBrowser, WorldCard, XPBar, alertVariants, anvilCostState, avatarStatuses, badgeVariants, biomeTypes, blockButtonVariants, bossBarColors, bossBarSegments, brewingStates, browseServers, browseWorlds, cardMaterials, chatMessageTypes, clamp, compassName, consoleEntryKinds, cx, dayPhase, describeItemStack, describeMarker, dividerVariants, durabilityLevel, facings, filterRecipes, formatClock, formatNumber, furnaceStates, getBrewingState, getFurnaceState, getPaginationRange, initials, itemRarities, miniMapMarkerKinds, miniMapTerrain, normalizeRarity, pingQuality, progressVariants, ratio, skeletonVariants, skillState, stackGaps, suggestCommands, toast, tooltipPlacements, useBlockUI, useControllableState, useDigitHotkeys, useFocusTrap, useMediaQuery, usePortalContainer, useToasts, villagerLevels, weatherTypes };

package/dist/styles.css

@@ -1415,6 +1415,46 @@
 .block-slider-RnmGA:active::-webkit-slider-thumb {
   filter: brightness(1.15);
 }
+.block-wrapper-b-npH {
+  display: flex;
+  align-items: stretch;
+  gap: var(--block-space-1);
+}
+
+.block-input-cg-Fv {
+  flex: 1;
+  min-width: 0;
+  height: var(--block-size-control-md);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.block-button-8xOEk {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--block-size-control-md);
+  padding: 0;
+  color: var(--block-text);
+  background-color: var(--block-surface-alt);
+  border: var(--block-border-width-thin) solid var(--block-border);
+  box-shadow: var(--block-shadow-bevel);
+  cursor: pointer;
+}
+
+.block-button-8xOEk:hover:not(:disabled) {
+  background-color: var(--block-slot-hover);
+}
+
+.block-button-8xOEk:active:not(:disabled) {
+  box-shadow: var(--block-shadow-inset);
+}
+
+.block-button-8xOEk:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
 .block-root-Adx9O {
   display: flex;
   align-items: center;
@@ -4177,6 +4217,87 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
   /* Lightened so it stays above 4.5:1 on every theme's panel colour. */
   color: color-mix(in srgb, var(--block-redstone-light) 65%, var(--block-white));
 }
+.block-avatar-9s1vM {
+  --avatar-size: 32px;
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  color: var(--block-mat-on);
+  background-color: var(--block-mat);
+  border: var(--block-border-width-thin) solid var(--block-black);
+  box-shadow:
+    inset 2px 2px 0 var(--block-mat-light),
+    inset -2px -2px 0 var(--block-mat-dark);
+  vertical-align: middle;
+}
+
+.block-avatar-9s1vM[data-size="sm"] {
+  --avatar-size: 24px;
+}
+
+.block-avatar-9s1vM[data-size="lg"] {
+  --avatar-size: 48px;
+}
+
+.block-avatar-9s1vM[data-size="xl"] {
+  --avatar-size: 64px;
+}
+
+.block-image-RZELF {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  image-rendering: pixelated;
+}
+
+.block-icon-mq-FE {
+  display: inline-flex;
+  width: 70%;
+  height: 70%;
+}
+
+.block-icon-mq-FE > * {
+  width: 100%;
+  height: 100%;
+}
+
+.block-initials-siD-X {
+  font-family: var(--block-font-display);
+  font-size: calc(var(--avatar-size) * 0.4);
+  font-weight: var(--block-font-weight-bold);
+  line-height: 1;
+  text-shadow: var(--block-mat-text-shadow, none);
+}
+
+/* Presence dot, a quarter of the avatar, in the bottom-right corner. */
+.block-status-CalIQ {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  width: max(8px, calc(var(--avatar-size) * 0.3));
+  height: max(8px, calc(var(--avatar-size) * 0.3));
+  border: 2px solid var(--block-black);
+}
+
+.block-status-CalIQ[data-status="online"] {
+  background-color: var(--block-emerald-light);
+}
+
+.block-status-CalIQ[data-status="away"] {
+  background-color: var(--block-gold-light);
+}
+
+.block-status-CalIQ[data-status="busy"] {
+  background-color: var(--block-redstone-light);
+}
+
+.block-status-CalIQ[data-status="offline"] {
+  background-color: var(--block-stone);
+}
 .block-chat-Q0XDo {
   --chat-height: 240px;
   display: flex;
@@ -5069,6 +5190,86 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
   letter-spacing: var(--block-letter-spacing-wide);
   text-transform: uppercase;
 }
+.block-accordion-u7KUD {
+  display: flex;
+  flex-direction: column;
+  gap: var(--block-space-1);
+  width: 100%;
+}
+
+.block-item-Anf9u {
+  background-color: var(--block-surface);
+  border: var(--block-border-width) solid var(--block-border);
+  box-shadow: var(--block-shadow-bevel);
+}
+
+.block-heading-YzlrO {
+  margin: 0;
+}
+
+.block-trigger-r-rVI {
+  display: flex;
+  align-items: center;
+  gap: var(--block-space-2);
+  width: 100%;
+  min-height: 44px;
+  padding: var(--block-space-2) var(--block-space-3);
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-sm);
+  font-weight: var(--block-font-weight-bold);
+  letter-spacing: var(--block-letter-spacing-wide);
+  text-align: left;
+  text-transform: uppercase;
+  color: var(--block-text);
+  background-color: var(--block-surface-header);
+  border: 0;
+  cursor: pointer;
+}
+
+.block-trigger-r-rVI:hover:not(:disabled) {
+  background-color: var(--block-slot-hover);
+}
+
+.block-trigger-r-rVI:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: -3px;
+}
+
+.block-trigger-r-rVI:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.block-icon-ja4pL {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.block-title-xq19m {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.block-chevron-hKGfT {
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform var(--block-duration-instant) var(--block-ease-step);
+}
+
+.block-item-Anf9u[data-open] .block-chevron-hKGfT {
+  transform: rotate(180deg);
+}
+
+.block-panel-wcIDx {
+  padding: var(--block-space-3);
+  border-top: var(--block-border-width-thin) solid var(--block-border);
+  color: var(--block-text);
+}
+
+.block-panel-wcIDx[hidden] {
+  display: none;
+}
 .block-overlay-gc2QW {
   position: fixed;
   inset: 0;
@@ -5274,4 +5475,262 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
 .block-bar-oFS7J {
   width: 100%;
 }
+.block-overlay-MaF41 {
+  position: fixed;
+  inset: 0;
+  z-index: var(--block-z-modal);
+  display: flex;
+  justify-content: flex-end;
+  background-color: var(--block-overlay);
+  animation: block-block-drawer-fade-4rcmM var(--block-duration-fast) steps(3, end);
+}
+
+.block-overlay-MaF41[data-side="left"] {
+  justify-content: flex-start;
+}
+
+.block-overlay-MaF41[data-side="bottom"] {
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.block-drawer-aWDC6 {
+  --drawer-size: 360px;
+  display: flex;
+  flex-direction: column;
+  width: min(var(--drawer-size), 100%);
+  height: 100%;
+  color: var(--block-text);
+  background-color: var(--block-surface);
+  background-image:
+    linear-gradient(
+      color-mix(in srgb, var(--block-surface) 88%, transparent),
+      color-mix(in srgb, var(--block-surface) 88%, transparent)
+    ),
+    var(--block-texture);
+  background-size:
+    auto,
+    64px 64px;
+  border-left: var(--block-border-width) solid var(--block-border);
+  box-shadow: var(--block-shadow-bevel);
+  outline: none;
+  animation: block-block-drawer-in-right-Krar9 var(--block-duration-normal) steps(4, end);
+}
+
+.block-drawer-aWDC6[data-size="sm"] {
+  --drawer-size: 280px;
+}
+
+.block-drawer-aWDC6[data-size="lg"] {
+  --drawer-size: 520px;
+}
+
+.block-drawer-aWDC6[data-side="left"] {
+  border-left: 0;
+  border-right: var(--block-border-width) solid var(--block-border);
+  animation-name: block-block-drawer-in-left-EnlSn;
+}
+
+.block-drawer-aWDC6[data-side="bottom"] {
+  --drawer-size: 50dvh;
+  width: 100%;
+  height: min(var(--drawer-size), 100%);
+  border-left: 0;
+  border-top: var(--block-border-width) solid var(--block-border);
+  animation-name: block-block-drawer-in-bottom-yyZ8z;
+}
+
+.block-drawer-aWDC6[data-side="bottom"][data-size="sm"] {
+  --drawer-size: 33dvh;
+}
+
+.block-drawer-aWDC6[data-side="bottom"][data-size="lg"] {
+  --drawer-size: 80dvh;
+}
+
+.block-header-FheCx {
+  display: flex;
+  align-items: center;
+  gap: var(--block-space-2);
+  margin: 3px 3px 0;
+  padding: var(--block-space-2) var(--block-space-3);
+  background-color: var(--block-surface-header);
+  border-bottom: var(--block-border-width-thin) solid var(--block-border);
+}
+
+.block-title-4QE9I {
+  flex: 1;
+  margin: 0;
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-lg);
+  font-weight: var(--block-font-weight-bold);
+  letter-spacing: var(--block-letter-spacing-wide);
+  text-transform: uppercase;
+  text-shadow: var(--block-shadow-text);
+}
+
+.block-close-fdVrq {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  color: var(--block-text);
+  background-color: var(--block-slot);
+  border: var(--block-border-width-thin) solid var(--block-border);
+  box-shadow: var(--block-shadow-inset);
+  cursor: pointer;
+}
+
+.block-close-fdVrq:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: 2px;
+}
+
+.block-body-aFN-w {
+  flex: 1;
+  min-height: 0;
+  padding: var(--block-space-4);
+  overflow-y: auto;
+}
+
+.block-footer-m9z0P {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--block-space-2);
+  padding: var(--block-space-3) var(--block-space-4);
+  border-top: var(--block-border-width-thin) solid var(--block-border);
+}
+
+@keyframes block-block-drawer-fade-4rcmM {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes block-block-drawer-in-right-Krar9 {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes block-block-drawer-in-left-EnlSn {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes block-block-drawer-in-bottom-yyZ8z {
+  from {
+    transform: translateY(100%);
+  }
+}
+.block-empty-CypAE {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--block-space-2);
+  width: 100%;
+  padding: var(--block-space-8) var(--block-space-4);
+  text-align: center;
+  color: var(--block-text);
+  background-color: var(--block-slot);
+  border: var(--block-border-width-thin) dashed var(--block-border);
+}
+
+.block-empty-CypAE[data-size="sm"] {
+  padding: var(--block-space-4) var(--block-space-3);
+}
+
+.block-icon-RT29d {
+  display: inline-flex;
+  opacity: 0.6;
+  filter: grayscale(0.5);
+}
+
+.block-title-gsp4I {
+  margin: 0;
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-md);
+  font-weight: var(--block-font-weight-bold);
+  letter-spacing: var(--block-letter-spacing-wide);
+  text-transform: uppercase;
+  text-shadow: var(--block-shadow-text);
+}
+
+.block-empty-CypAE[data-size="sm"] .block-title-gsp4I {
+  font-size: var(--block-font-size-sm);
+}
+
+.block-description-es-JM {
+  max-width: 42ch;
+  margin: 0;
+  font-size: var(--block-font-size-sm);
+  color: var(--block-text-muted);
+}
+
+.block-action-TqLZE {
+  margin-top: var(--block-space-2);
+}
+.block-skeleton-iGMZW {
+  display: flex;
+  flex-direction: column;
+  gap: var(--block-space-2);
+  width: var(--block-skeleton-width, 100%);
+  max-width: 100%;
+}
+
+.block-bone-cYRm- {
+  display: block;
+  height: 12px;
+  background-color: var(--block-slot);
+  background-image: linear-gradient(
+    90deg,
+    transparent 0 40%,
+    color-mix(in srgb, var(--block-text) 12%, transparent) 40% 60%,
+    transparent 60%
+  );
+  background-size: 300% 100%;
+  border: var(--block-border-width-thin) solid var(--block-border);
+  animation: block-block-skeleton-sweep-8kYA1 1.2s steps(8, end) infinite;
+}
+
+.block-bone-cYRm-[data-last] {
+  width: 60%;
+}
+
+.block-skeleton-iGMZW[data-variant="block"] .block-bone-cYRm- {
+  height: var(--block-skeleton-height, 96px);
+}
+
+.block-skeleton-iGMZW[data-variant="slot"] {
+  width: var(--block-skeleton-width, var(--block-size-slot-md));
+}
+
+.block-skeleton-iGMZW[data-variant="slot"] .block-bone-cYRm- {
+  aspect-ratio: 1;
+  height: auto;
+  box-shadow: var(--block-shadow-inset);
+}
+
+.block-skeleton-iGMZW[data-variant="avatar"] {
+  width: var(--block-skeleton-width, 48px);
+}
+
+.block-skeleton-iGMZW[data-variant="avatar"] .block-bone-cYRm- {
+  aspect-ratio: 1;
+  height: auto;
+}
+
+/* A stepped highlight sweep; reduced motion stops it (base.css). */
+@keyframes block-block-skeleton-sweep-8kYA1 {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malilion/block-ui-react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Block UI — block / pixel / crafting game-style React components: inventory, crafting, HUD, cards, forms and more.",
   "license": "MIT",
   "author": "Block UI Contributors",
@@ -42,9 +42,9 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
-    "@malilion/block-ui-icons": "^0.3.0",
-    "@malilion/block-ui-themes": "^0.3.0",
-    "@malilion/block-ui-tokens": "^0.3.0"
+    "@malilion/block-ui-icons": "^0.4.0",
+    "@malilion/block-ui-themes": "^0.4.0",
+    "@malilion/block-ui-tokens": "^0.4.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.6.1",