@povio/ui 5.0.0-rc.6 → 5.0.0-rc.8

package/dist/styles/configurator.css

@@ -549,7 +549,7 @@
 .studio-error {
   color: #b8362c;
   display: block;
-  margin-top: 7px;
+  margin-top: 4px;
   font-size: 11px;
 }
 .studio-preview {
@@ -967,7 +967,7 @@
 }
 .studio-token-unit {
   position: absolute;
-  right: 7px;
+  right: 4px;
   top: 50%;
   transform: translateY(-50%);
   color: #939393;
@@ -1302,7 +1302,7 @@
   background: #93c47d;
 }
 .studio-inspect-region.is-gap {
-  background: repeating-linear-gradient(45deg, #b48ce0 0 3px, #d8c3ef 3px 6px);
+  background: repeating-linear-gradient(45deg, #fb923c 0 3px, #fed7aa 3px 6px);
 }
 .studio-inspect-region.is-radius {
   background: #f0a35e;
@@ -1338,7 +1338,7 @@
   color: #b9e0a5;
 }
 .studio-inspect-label.is-gap strong {
-  color: #d8c3ef;
+  color: #fed7aa;
 }
 .studio-inspect-label.is-radius strong {
   color: #f6c08f;
@@ -1471,7 +1471,7 @@
 }
 .studio-token-sample > span {
   display: block;
-  margin-bottom: 7px;
+  margin-bottom: 4px;
   font: 11px sans-serif;
   text-transform: capitalize;
 }
@@ -1669,7 +1669,7 @@
   align-items: center;
   gap: 7px;
   min-width: 0;
-  padding-left: 7px;
+  padding-left: 4px;
 }
 .studio-alpha-swatch {
   position: relative;
@@ -2714,3 +2714,567 @@
   outline: 2px solid #555;
   outline-offset: 3px;
 }
+
+/* Live-preview inspection keeps the canvas and property sidebar independently scrollable. */
+.studio-preview:has(.studio-hover-inspector) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+.studio-preview-heading,
+.studio-preview-note {
+  flex-shrink: 0;
+}
+.studio-hover-inspector {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  grid-auto-rows: minmax(0, 1fr);
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  gap: 16px;
+  container: studio-inspection / inline-size;
+}
+.studio-hover-inspector.has-inspector {
+  grid-template-columns: minmax(0, 1fr) 270px;
+}
+.studio-inspector-toolbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  color: #8b8b8b;
+  font-size: 10px;
+}
+.studio-inspector-toolbar .studio-mode button {
+  padding: 4px 8px;
+  font-size: 10px;
+}
+.studio-inspector-canvas-shell {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+.studio-inspector-canvas {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.studio-hover-outline-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 2;
+}
+.studio-hover-outline {
+  position: absolute;
+  border: 1px solid #8b5cf6;
+  box-shadow: 0 0 0 1px #8b5cf633;
+}
+.studio-hover-outline > span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-100%);
+  max-width: 280px;
+  padding: 2px 5px;
+  border-radius: 3px 3px 0 0;
+  background: #7c3aed;
+  color: #fff;
+  font:
+    10px/1.5 "Inter Variable",
+    sans-serif;
+  white-space: nowrap;
+}
+.studio-inspector-panel {
+  grid-column: 2;
+  position: relative;
+  align-self: stretch;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  box-sizing: border-box;
+  border: 1px solid #dedde4;
+  border-radius: 10px;
+  background: #fff;
+  color: #292730;
+  font:
+    11px/1.5 "Inter Variable",
+    Inter,
+    sans-serif;
+  overscroll-behavior: contain;
+}
+.studio-inspector-panel > header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 9px 12px;
+  border-bottom: 1px solid #efedf3;
+  background: #fff;
+}
+.studio-inspector-panel > header > strong {
+  flex: 1;
+  font-size: 11px;
+}
+.studio-inspector-panel button {
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #716c7d;
+  cursor: pointer;
+}
+.studio-inspector-panel > header button {
+  display: grid;
+  place-items: center;
+  padding: 5px;
+}
+.studio-inspector-panel button[aria-pressed="true"] {
+  background: #ede9fe;
+  color: #7c3aed;
+}
+.studio-inspector-panel button:focus-visible {
+  outline: 2px solid #8b5cf6;
+  outline-offset: 1px;
+}
+.studio-inspector-panel section {
+  border-top: 1px solid #efedf3;
+  padding: 10px 12px;
+}
+.studio-inspector-panel h3 {
+  margin: 0 0 7px;
+  font-size: 9px;
+  font-weight: 600;
+  color: #928a9d;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+.studio-inspector-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.studio-inspector-section-heading h3 {
+  margin: 0;
+}
+.studio-inspector-section-heading > span {
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: #f4f4f4;
+  color: #777;
+  font-size: 10px;
+}
+.studio-inspector-panel dl {
+  margin: 0;
+}
+.studio-inspector-panel dl > div {
+  display: grid;
+  grid-template-columns: 85px minmax(0, 1fr);
+  gap: 6px;
+  padding: 3px 0;
+}
+.studio-inspector-panel dt {
+  color: #817b8b;
+}
+.studio-inspector-panel dd {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.studio-inspector-panel dd > i {
+  width: 12px;
+  height: 12px;
+  border: 1px solid #0002;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.studio-inspector-panel dd > button {
+  max-width: 100%;
+  padding: 2px 5px;
+  background: #f3effb;
+  color: #7752ae;
+  font-size: 9px;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.studio-inspector-empty {
+  margin: 0;
+  padding: 16px 12px;
+  color: #89838e;
+}
+.studio-box-model {
+  margin: 0;
+  padding: 8px;
+  border-radius: 7px;
+  background: #fafafa;
+  color: #393939;
+}
+.studio-box-model figcaption {
+  margin-top: 6px;
+  text-align: center;
+  color: #8b8b8b;
+  font-size: 9px;
+}
+.studio-box-layer {
+  position: relative;
+  padding: 24px;
+  box-sizing: border-box;
+  font:
+    10px/1.3 "Inter Variable",
+    sans-serif;
+}
+.studio-box-layer.is-position {
+  border: 1px dotted #b8b8b8;
+}
+.studio-box-layer.is-margin {
+  border: 1px dashed #b8b8b8;
+}
+.studio-box-layer.is-border {
+  border: 1px solid #b8b8b8;
+}
+.studio-box-layer.is-padding {
+  border: 1px dashed #a7a7a7;
+  background: #e9e9e9;
+}
+.studio-box-name {
+  position: absolute;
+  top: -7px;
+  left: 8px;
+  padding: 0 3px;
+  background: #fafafa;
+  color: #747474;
+  font-size: 9px;
+}
+.studio-box-layer.is-padding > .studio-box-name {
+  background: #e9e9e9;
+}
+.studio-box-value {
+  position: absolute;
+  font-variant-numeric: tabular-nums;
+}
+.studio-box-value.is-top {
+  top: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.studio-box-value.is-bottom {
+  bottom: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.studio-box-value.is-left {
+  left: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.studio-box-value.is-right {
+  right: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.studio-inspector-panel .studio-box-value {
+  padding: 0;
+  border-radius: 2px;
+  color: inherit;
+  line-height: 1.3;
+  font-size: 10px;
+}
+.studio-inspector-panel button.studio-box-value[data-token] {
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+}
+.studio-box-radius {
+  position: absolute;
+  padding: 1px 2px;
+  border-radius: 3px;
+  background: #f5f5f5;
+  color: #777;
+  font-size: 8px;
+  line-height: 1;
+}
+.studio-box-radius.is-topLeft {
+  top: 3px;
+  left: 3px;
+}
+.studio-box-radius.is-topRight {
+  top: 3px;
+  right: 3px;
+}
+.studio-box-radius.is-bottomLeft {
+  bottom: 3px;
+  left: 3px;
+}
+.studio-box-radius.is-bottomRight {
+  bottom: 3px;
+  right: 3px;
+}
+.studio-inspector-panel .studio-box-radius {
+  padding: 1px;
+  color: #777;
+  font-size: 8px;
+  line-height: 1;
+}
+.studio-inspector-panel button.studio-box-radius[data-token] {
+  text-decoration: underline dotted;
+}
+.studio-box-content {
+  min-width: 0;
+  padding: 5px 2px;
+  border: 1px solid #b8b8b8;
+  background: #fafafa;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.studio-box-dimensions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  font-size: 9px;
+}
+.studio-box-gaps {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+  padding: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+}
+.studio-gap-grid {
+  display: grid;
+  width: 130px;
+  max-width: 100%;
+  align-items: center;
+  justify-items: center;
+}
+.studio-gap-grid i {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 1px solid #bdbdbd;
+  border-radius: 2px;
+  background: #e9e9e9;
+}
+.studio-gap-grid i:nth-child(1) {
+  grid-column: 1;
+  grid-row: 1;
+}
+.studio-gap-grid i:nth-child(2) {
+  grid-column: 3;
+  grid-row: 1;
+}
+.studio-gap-grid i:nth-child(3) {
+  grid-column: 1;
+  grid-row: 3;
+}
+.studio-gap-grid i:nth-child(4) {
+  grid-column: 3;
+  grid-row: 3;
+}
+.studio-gap-number {
+  color: #555;
+  font-size: 10px;
+}
+.studio-gap-number.is-column {
+  grid-column: 2;
+  grid-row: 1;
+}
+.studio-gap-number.is-row {
+  grid-column: 1;
+  grid-row: 2;
+}
+.studio-inspector-panel button.studio-gap-number[data-token] {
+  padding: 0;
+  text-decoration: underline dotted;
+  font-size: 10px;
+}
+.studio-box-layer.is-position,
+.studio-box-layer.is-position .studio-box-layer {
+  padding: 16px;
+}
+@container studio-inspection (max-width: 620px) {
+  .studio-inspector-canvas-shell,
+  .studio-inspector-panel {
+    grid-column: 1 / -1;
+  }
+  .studio-inspector-canvas-shell {
+    grid-row: 2;
+  }
+  .studio-inspector-panel {
+    grid-row: 3;
+  }
+}
+@container (max-width: 800px) {
+  .studio-preview:has(.studio-hover-inspector) {
+    height: max(420px, calc(100dvh - 220px));
+  }
+}
+.studio-box-layer.is-border:has(.studio-box-radius) {
+  border-color: transparent;
+}
+.studio-box-layer.is-border:has(.studio-box-radius)::before {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border: 1px solid #b8b8b8;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.studio-box-radius {
+  z-index: 1;
+}
+.studio-box-radius.is-topLeft {
+  top: 4px;
+  left: 4px;
+}
+.studio-box-radius.is-topRight {
+  top: 4px;
+  right: 4px;
+}
+.studio-box-radius.is-bottomLeft {
+  bottom: 4px;
+  left: 4px;
+}
+.studio-box-radius.is-bottomRight {
+  bottom: 4px;
+  right: 4px;
+}
+
+.studio-measure-regions {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.studio-measure-region {
+  position: absolute;
+  box-sizing: border-box;
+  background: #7c3aed88;
+  color: #4c1d95;
+  box-shadow:
+    inset 0 0 0 1px currentColor,
+    0 0 0 1px #fff;
+}
+.studio-measure-region.is-margin {
+  background: #22c55e88;
+  color: #15803d;
+}
+.studio-measure-region.is-border {
+  background: #2563ebbf;
+  color: #1e40af;
+}
+.studio-measure-region.is-gap {
+  background: repeating-linear-gradient(45deg, #fb923c88 0 3px, #ea580cbf 3px 5px);
+  color: #c2410c;
+}
+.studio-measure-region.is-horizontal {
+  height: 1px !important;
+  border-top: 2px solid currentColor;
+  background: none;
+}
+.studio-measure-region.is-vertical {
+  width: 1px !important;
+  border-left: 2px solid currentColor;
+  background: none;
+}
+.studio-measure-region.is-horizontal::before,
+.studio-measure-region.is-horizontal::after {
+  content: "";
+  position: absolute;
+  top: -4px;
+  height: 7px;
+  border-left: 2px solid currentColor;
+}
+.studio-measure-region.is-horizontal::before {
+  left: 0;
+}
+.studio-measure-region.is-horizontal::after {
+  right: 0;
+}
+.studio-measure-region.is-vertical::before,
+.studio-measure-region.is-vertical::after {
+  content: "";
+  position: absolute;
+  left: -4px;
+  width: 7px;
+  border-top: 2px solid currentColor;
+}
+.studio-measure-region.is-vertical::before {
+  top: 0;
+}
+.studio-measure-region.is-vertical::after {
+  bottom: 0;
+}
+.studio-measure-region.is-corner {
+  background: none;
+  box-shadow: none;
+}
+.studio-measure-region.is-corner svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.studio-measure-label {
+  position: absolute;
+  max-width: 220px;
+  padding: 3px 6px;
+  border-radius: 4px;
+  background: #6d28d9;
+  color: #fff;
+  font:
+    10px/1.4 "Inter Variable",
+    sans-serif;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 2px 6px #0004;
+}
+.studio-inspector-panel .studio-box-dimension-value {
+  padding: 0;
+  font: inherit;
+  font-size: 9px;
+  line-height: 1.3;
+  color: inherit;
+}
+.studio-inspector-panel .studio-gap-number {
+  padding: 0;
+  font-size: 10px;
+}
+.studio-box-model button[data-box-highlight]:hover,
+.studio-box-model button[data-box-highlight]:focus-visible {
+  background: #ede9fe;
+  color: #6d28d9;
+}
+
+.studio-measure-region.is-corner path {
+  stroke-width: 3px;
+  filter: drop-shadow(0 0 1px #fff);
+}
+
+/* The canvas editor is a movable tool window; the workspace remains interactive. */
+.studio-overlay.studio-overlay-floating {
+  background: transparent;
+  backdrop-filter: none;
+  pointer-events: none;
+}
+.studio-overlay-floating > .studio-modal {
+  pointer-events: auto;
+  box-shadow:
+    0 16px 64px #17102030,
+    0 0 0 1px #17102018;
+}

package/dist/switch.cva-BX3HOxbL.js

@@ -0,0 +1,27 @@
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { t as uiGroupOutlineClass } from "./outline.clsx-50W_vNDl.js";
+import { t as compoundMapper } from "./compoundMapper-Di3SKZnS.js";
+//#region src/components/inputs/Switch/switch.cva.ts
+const switchDefinition = UIOverrides.defineConfig({
+	base: ["h-6 w-10 rounded-full before:m-0.5 before:block before:aspect-square before:h-5 before:rounded-full before:transition-transform before:content-[''] group-selected:before:translate-x-4", uiGroupOutlineClass],
+	config: {
+		variants: { variant: { default: [
+			"bg-state-interactive-primary-background/disabled before:bg-interactive-primary-foreground",
+			"group-not-disabled:group-selected:bg-interactive-primary-background",
+			"group-disabled:bg-state-interactive-secondary-background/disabled group-disabled:before:bg-interactive-secondary-foreground",
+			"group-focus-visible:outline-interactive-ring",
+			"group-not-disabled:group-hover:bg-state-interactive-primary-background/hover",
+			"group-not-disabled:group-pressed:bg-state-interactive-primary-background/pressed",
+			"group-not-disabled:group-selected:group-hover:bg-state-interactive-primary-background/hover",
+			"group-not-disabled:group-selected:group-pressed:bg-state-interactive-primary-background/pressed"
+		] } },
+		defaultVariants: { variant: "default" }
+	}
+});
+const switchTypography = compoundMapper({ default: {
+	size: "large",
+	sizeMobile: "large"
+} });
+const switchContentClassName = compoundMapper({ default: "text-surface-default-foreground" });
+//#endregion
+export { switchDefinition as n, switchTypography as r, switchContentClassName as t };

package/dist/{table.cva-D5oQ-QvA.js → table.cva-DlMT-zLD.js}

@@ -1,57 +1,4 @@
-import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/grip-vertical.mjs
-/**
-* @license lucide-react v1.43.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const __iconData = {
-	name: "grip-vertical",
-	size: 24,
-	node: [
-		["circle", {
-			cx: "9",
-			cy: "12",
-			r: "1",
-			key: "1vctgf"
-		}],
-		["circle", {
-			cx: "9",
-			cy: "5",
-			r: "1",
-			key: "hp0tcf"
-		}],
-		["circle", {
-			cx: "9",
-			cy: "19",
-			r: "1",
-			key: "fkjjf6"
-		}],
-		["circle", {
-			cx: "15",
-			cy: "12",
-			r: "1",
-			key: "1tmaij"
-		}],
-		["circle", {
-			cx: "15",
-			cy: "5",
-			r: "1",
-			key: "19l28e"
-		}],
-		["circle", {
-			cx: "15",
-			cy: "19",
-			r: "1",
-			key: "f4zoj3"
-		}]
-	]
-};
-__iconData.node;
-const GripVertical = createLucideIcon(__iconData);
-//#endregion
 //#region src/components/table/table.cva.ts
 const tableRowDefinition = UIOverrides.defineConfig({
 	base: [
@@ -98,4 +45,4 @@ const tableDataDefinition = UIOverrides.defineConfig({
 const tableHeaderTextDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-surface-default-card-foreground"] });
 const tableCellTextDefinition = UIOverrides.defineConfig({ base: ["block overflow-hidden text-ellipsis text-surface-default-foreground"] });
 //#endregion
-export { tableHeaderTextDefinition as a, GripVertical as c, tableHeadRowDefinition as i, tableDataDefinition as n, tableRowDefinition as o, tableHeadDataDefinition as r, theadDefinition as s, tableCellTextDefinition as t };
+export { tableHeaderTextDefinition as a, tableHeadRowDefinition as i, tableDataDefinition as n, tableRowDefinition as o, tableHeadDataDefinition as r, theadDefinition as s, tableCellTextDefinition as t };