@malilion/block-ui-react 0.4.0 → 0.5.1

package/dist/styles.css

@@ -829,6 +829,10 @@
   background-color: var(--block-shadow-bevel-dark);
   box-shadow: inset -2px -2px 0 var(--block-shadow-bevel-light);
 }
+/* The area takes the size of its content; it adds no visual of its own. */
+.block-area-Zq0O2 {
+  display: contents;
+}
 .block-field-mjy2g {
   display: flex;
   flex-direction: column;
@@ -4298,6 +4302,92 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
 .block-status-CalIQ[data-status="offline"] {
   background-color: var(--block-stone);
 }
+.block-anchor-Hc2xy {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.block-panel-hIYiA {
+  position: fixed;
+  top: var(--block-float-y, 0);
+  left: var(--block-float-x, 0);
+  z-index: var(--block-z-dropdown);
+  display: flex;
+  flex-direction: column;
+  gap: var(--block-space-2);
+  width: max-content;
+  min-width: 200px;
+  max-width: min(360px, calc(100vw - var(--block-space-4)));
+  max-height: calc(100vh - var(--block-space-4));
+  padding: var(--block-space-3);
+  overflow-y: auto;
+  color: var(--block-text);
+  background-color: var(--block-surface);
+  border: var(--block-border-width) solid var(--block-border);
+  box-shadow: var(--block-shadow-bevel), var(--block-shadow-drop);
+}
+
+.block-panel-hIYiA:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: 2px;
+}
+
+.block-title-0MX0a {
+  margin: 0;
+  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-transform: uppercase;
+  text-shadow: var(--block-shadow-text);
+}
+
+.block-body-K6cco {
+  font-size: var(--block-font-size-sm);
+}
+.block-key-FLsly {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  min-height: 28px;
+  padding: 0 var(--block-space-1);
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-xs);
+  font-weight: var(--block-font-weight-bold);
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--block-text);
+  background-color: var(--block-surface-alt);
+  border: var(--block-border-width-thin) solid var(--block-border);
+  box-shadow:
+    inset 2px 2px 0 var(--block-shadow-bevel-light),
+    inset -2px -4px 0 var(--block-shadow-bevel-dark);
+  padding-bottom: 2px;
+  vertical-align: middle;
+}
+
+.block-key-FLsly[data-size="sm"],
+[data-size="sm"] > .block-key-FLsly {
+  min-width: 22px;
+  min-height: 22px;
+  font-size: 0.625rem;
+}
+
+.block-combo-xCqO- {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--block-space-1);
+  font: inherit;
+  vertical-align: middle;
+}
+
+.block-plus-OaCLf {
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-xs);
+  color: var(--block-text-muted);
+}
 .block-chat-Q0XDo {
   --chat-height: 240px;
   display: flex;
@@ -5019,6 +5109,148 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
   white-space: nowrap;
   color: var(--block-text);
 }
+.block-stepper-AFyIV {
+  width: 100%;
+}
+
+.block-list-O8q0K {
+  display: flex;
+  gap: var(--block-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.block-stepper-AFyIV[data-orientation="vertical"] .block-list-O8q0K {
+  flex-direction: column;
+}
+
+.block-step-yvErb {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Connector to the next step. */
+.block-stepper-AFyIV[data-orientation="horizontal"] .block-step-yvErb:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  left: calc(32px + var(--block-space-2));
+  right: var(--block-space-2);
+  height: 4px;
+  background-color: var(--block-border);
+}
+
+.block-stepper-AFyIV[data-orientation="horizontal"] .block-step-yvErb[data-state="complete"]::after {
+  background-color: var(--block-emerald);
+}
+
+.block-stepper-AFyIV[data-orientation="vertical"] .block-step-yvErb:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: 36px;
+  bottom: calc(-1 * var(--block-space-2) + 4px);
+  left: 14px;
+  width: 4px;
+  background-color: var(--block-border);
+}
+
+.block-stepper-AFyIV[data-orientation="vertical"] .block-step-yvErb[data-state="complete"]::after {
+  background-color: var(--block-emerald);
+}
+
+.block-content-BWfnF {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--block-space-2);
+  padding: 0;
+  font: inherit;
+  text-align: left;
+  color: inherit;
+  background: none;
+  border: 0;
+}
+
+.block-stepper-AFyIV[data-orientation="horizontal"] .block-content-BWfnF {
+  flex-direction: column;
+}
+
+button.block-content-BWfnF {
+  cursor: pointer;
+}
+
+button.block-content-BWfnF:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: 2px;
+}
+
+.block-marker-THwA7 {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-sm);
+  font-weight: var(--block-font-weight-bold);
+  color: var(--block-text-muted);
+  background-color: var(--block-slot);
+  border: var(--block-border-width-thin) solid var(--block-border);
+  box-shadow: var(--block-shadow-inset);
+}
+
+.block-step-yvErb[data-state="current"] .block-marker-THwA7 {
+  color: var(--block-text);
+  background-color: var(--block-surface-alt);
+  border-color: var(--block-gold);
+  box-shadow: var(--block-shadow-bevel);
+}
+
+.block-step-yvErb[data-state="complete"] .block-marker-THwA7 {
+  color: var(--block-on-emerald);
+  background-color: var(--block-emerald);
+  border-color: var(--block-emerald-dark);
+}
+
+.block-text-Fys8d {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.block-label-loKfO {
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-xs);
+  font-weight: var(--block-font-weight-bold);
+  text-transform: uppercase;
+  color: var(--block-text-muted);
+  overflow-wrap: anywhere;
+}
+
+.block-step-yvErb[data-state="current"] .block-label-loKfO,
+.block-step-yvErb[data-state="complete"] .block-label-loKfO {
+  color: var(--block-text);
+}
+
+button.block-content-BWfnF:hover .block-label-loKfO {
+  text-decoration: underline;
+}
+
+.block-description-TR0zD {
+  font-size: var(--block-font-size-xs);
+  color: var(--block-text-muted);
+}
+
+@media (max-width: 767.98px) {
+  .block-stepper-AFyIV[data-orientation="horizontal"] .block-description-TR0zD {
+    display: none;
+  }
+}
 .block-stack-z5qhc {
   display: flex;
   flex-direction: column;
@@ -5270,6 +5502,55 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
 .block-panel-wcIDx[hidden] {
   display: none;
 }
+.block-grid-skICT {
+  display: grid;
+  gap: var(--block-grid-gap);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.block-grid-skICT[data-mode="fixed"] {
+  grid-template-columns: repeat(var(--block-grid-columns), minmax(0, 1fr));
+}
+
+.block-grid-skICT[data-mode="auto"] {
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--block-grid-min), 100%), 1fr));
+}
+
+@media (max-width: 767.98px) {
+  .block-grid-skICT[data-stack-mobile] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.block-container-UJuv- {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 1024px;
+  margin-inline: auto;
+  padding-inline: var(--block-space-4);
+}
+
+.block-container-UJuv-[data-size="sm"] {
+  max-width: 640px;
+}
+
+.block-container-UJuv-[data-size="md"] {
+  max-width: 768px;
+}
+
+.block-container-UJuv-[data-size="xl"] {
+  max-width: 1280px;
+}
+
+.block-container-UJuv-[data-size="full"] {
+  max-width: none;
+}
+
+.block-container-UJuv-[data-flush] {
+  padding-inline: 0;
+}
 .block-overlay-gc2QW {
   position: fixed;
   inset: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malilion/block-ui-react",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "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.4.0",
-    "@malilion/block-ui-themes": "^0.4.0",
-    "@malilion/block-ui-tokens": "^0.4.0"
+    "@malilion/block-ui-icons": "^0.5.1",
+    "@malilion/block-ui-tokens": "^0.5.1",
+    "@malilion/block-ui-themes": "^0.5.1"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.6.1",