@digiform/wizard 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digiform/wizard",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "React component for rendering configurable multi-step forms from a JSON config",
   "author": "VladAfanasev",
   "license": "MIT",
@@ -56,6 +56,6 @@
     "lucide-react": "^0.400.0"
   },
   "optionalPeerDependencies": {
-    "@formbuilder/builder": "0.1.1"
+    "@digiform/builder": "0.2.3"
   }
 }

package/renderer/wizardRenderer.d.ts

@@ -0,0 +1,2 @@
+import { RenderComponentFn } from '../../../ui/src/index.ts';
+export declare const wizardDefaultRenderer: RenderComponentFn;

package/styles.css

@@ -498,6 +498,41 @@
   padding: var(--fb-space-lg);
   padding-block-start: 0;
 }
+.fb-checkbox_wsic0 {
+  block-size: 1rem;
+  inline-size: 1rem;
+  flex-shrink: 0;
+  border-radius: var(--fb-radius-sm);
+  border: var(--fb-border-width) solid var(--fb-primary);
+  cursor: pointer;
+}
+
+.fb-checkbox_wsic0:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--fb-border);
+}
+
+.fb-checkbox_wsic0:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.fb-checkbox_wsic0[data-state="checked"] {
+  background-color: var(--fb-primary);
+  color: var(--fb-text-on-primary);
+}
+
+.fb-checkboxIndicator_31Q4N {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
+
+.fb-checkboxIndicator_31Q4N svg {
+  block-size: 1rem;
+  inline-size: 1rem;
+}
 /* Dialog overlay - backdrop with fade animations */
 .fb-dialogOverlay_GSMVm {
 	position: fixed;
@@ -810,6 +845,46 @@
 .fb-additionalContent_0tppE {
 	margin-block-start: var(--fb-space-md);
 }
+.fb-input_RJ7IM {
+  display: flex;
+  block-size: var(--fb-size-touch-target);
+  inline-size: 100%;
+  border-radius: var(--fb-radius-md);
+  border: var(--fb-border-width) solid var(--fb-border);
+  background-color: var(--fb-background);
+  padding-inline: var(--fb-space-12);
+  padding-block: var(--fb-space-sm);
+  font-size: var(--fb-font-size-md);
+  color: var(--fb-text);
+}
+
+.fb-input_RJ7IM::placeholder {
+  color: var(--fb-text-muted);
+}
+
+.fb-input_RJ7IM::file-selector-button {
+  border: 0;
+  background-color: transparent;
+  font-size: var(--fb-font-size-sm);
+  font-weight: 500;
+  color: var(--fb-text);
+}
+
+.fb-input_RJ7IM:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--fb-border);
+}
+
+.fb-input_RJ7IM:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+@media (min-width: 768px) {
+  .fb-input_RJ7IM {
+    font-size: var(--fb-font-size-sm);
+  }
+}
 .fb-wrapper_nDU5Q {
 	display: flex;
 	flex-direction: column;
@@ -896,6 +971,235 @@ label.fb-progressLabel_3nfSJ {
 		opacity: 1;
 	}
 }
+.fb-radioGroup_PqpPn {
+	display: grid;
+	gap: var(--fb-space-sm);
+}
+
+.fb-radioGroupItem_r91M1 {
+	aspect-ratio: 1;
+	block-size: 1rem;
+	inline-size: 1rem;
+	border-radius: var(--fb-radius-full);
+	border: var(--fb-border-width) solid var(--fb-primary);
+	color: var(--fb-primary);
+	background-color: transparent;
+	outline: none;
+	transition: opacity 150ms ease;
+}
+
+.fb-radioGroupItem_r91M1:focus-visible {
+	outline: 2px solid var(--fb-border-focus);
+	outline-offset: 2px;
+}
+
+.fb-radioGroupItem_r91M1:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.fb-radioIndicator_PFyGX {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.fb-radioIndicatorIcon_vSsbY {
+	block-size: 0.625rem;
+	inline-size: 0.625rem;
+	fill: currentColor;
+	color: currentColor;
+}
+/* Select trigger - button to open dropdown */
+.fb-selectTrigger_dj84x {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	block-size: 2.5rem;
+	inline-size: 100%;
+	border-radius: var(--fb-radius-md);
+	border: var(--fb-border-width) solid var(--fb-border);
+	background-color: var(--fb-background);
+	padding-inline: var(--fb-space-6);
+	padding-block: var(--fb-space-sm);
+	font-size: var(--fb-font-size-sm);
+}
+
+.fb-selectTrigger_dj84x::placeholder {
+	color: var(--fb-text-muted);
+}
+
+.fb-selectTrigger_dj84x:focus {
+	outline: none;
+	box-shadow: 0 0 0 2px var(--fb-border-focus);
+}
+
+.fb-selectTrigger_dj84x:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.fb-selectTrigger_dj84x > span {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+}
+
+/* Select trigger icon */
+.fb-selectTriggerIcon_V8dav {
+	block-size: 1rem;
+	inline-size: 1rem;
+	opacity: 0.5;
+}
+
+/* Scroll buttons */
+.fb-selectScrollUpButton_c6WZR,
+.fb-selectScrollDownButton_kmWY4 {
+	display: flex;
+	cursor: default;
+	align-items: center;
+	justify-content: center;
+	padding-block: var(--fb-space-2);
+}
+
+.fb-selectScrollIcon_IZbZG {
+	block-size: 1rem;
+	inline-size: 1rem;
+}
+
+/* Select content - dropdown panel */
+.fb-selectContent_uJ-ZX {
+	position: relative;
+	z-index: 50;
+	max-block-size: 24rem;
+	min-inline-size: 8rem;
+	overflow: hidden;
+	border-radius: var(--fb-radius-md);
+	border: var(--fb-border-width) solid var(--fb-border);
+	background-color: var(--fb-background);
+	color: var(--fb-text);
+	box-shadow: var(--fb-shadow-md);
+}
+
+.fb-selectContent_uJ-ZX[data-state="open"] {
+	animation: fb-selectContentIn_n9zpE 150ms ease-out;
+}
+
+.fb-selectContent_uJ-ZX[data-state="closed"] {
+	animation: fb-selectContentOut_rxdBe 150ms ease-in;
+}
+
+/* Position-based transforms for popper mode */
+.fb-selectContent_uJ-ZX.fb-popper_uKkq9[data-side="bottom"] {
+	transform: translateY(0.25rem);
+}
+
+.fb-selectContent_uJ-ZX.fb-popper_uKkq9[data-side="left"] {
+	transform: translateX(-0.25rem);
+}
+
+.fb-selectContent_uJ-ZX.fb-popper_uKkq9[data-side="right"] {
+	transform: translateX(0.25rem);
+}
+
+.fb-selectContent_uJ-ZX.fb-popper_uKkq9[data-side="top"] {
+	transform: translateY(-0.25rem);
+}
+
+/* Select viewport */
+.fb-selectViewport_wcTaR {
+	padding: var(--fb-space-2);
+}
+
+.fb-selectViewport_wcTaR.fb-popper_uKkq9 {
+	block-size: var(--radix-select-trigger-height);
+	inline-size: 100%;
+	min-inline-size: var(--radix-select-trigger-width);
+}
+
+/* Select label */
+.fb-selectLabel_hb7ig {
+	padding-block: var(--fb-space-3);
+	padding-inline-start: var(--fb-space-md);
+	padding-inline-end: var(--fb-space-sm);
+	font-size: var(--fb-font-size-sm);
+	font-weight: var(--fb-font-weight-semibold);
+}
+
+/* Select item */
+.fb-selectItem_f23oZ {
+	position: relative;
+	display: flex;
+	inline-size: 100%;
+	cursor: default;
+	user-select: none;
+	align-items: center;
+	border-radius: var(--fb-radius-sm);
+	padding-block: var(--fb-space-3);
+	padding-inline-start: var(--fb-space-md);
+	padding-inline-end: var(--fb-space-sm);
+	font-size: var(--fb-font-size-sm);
+	outline: none;
+}
+
+.fb-selectItem_f23oZ:focus {
+	background-color: var(--fb-accent);
+	color: var(--fb-text);
+}
+
+.fb-selectItem_f23oZ[data-disabled] {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+/* Select item indicator */
+.fb-selectItemIndicator_PD-WQ {
+	position: absolute;
+	left: var(--fb-space-sm);
+	display: flex;
+	block-size: 0.875rem;
+	inline-size: 0.875rem;
+	align-items: center;
+	justify-content: center;
+}
+
+.fb-selectItemIndicatorIcon_kgB1I {
+	block-size: 1rem;
+	inline-size: 1rem;
+}
+
+/* Select separator */
+.fb-selectSeparator_DS7X2 {
+	margin-inline: calc(-1 * var(--fb-space-2));
+	margin-block: var(--fb-space-2);
+	block-size: 1px;
+	background-color: var(--fb-surface-accent);
+}
+
+/* Keyframe animations */
+@keyframes fb-selectContentIn_n9zpE {
+	from {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes fb-selectContentOut_rxdBe {
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+}
 /* Sheet overlay - backdrop with fade animations */
 .fb-sheetOverlay_2nFRz {
 	position: fixed;
@@ -1181,6 +1485,32 @@ label.fb-progressLabel_3nfSJ {
 		transform: translateX(100%);
 	}
 }
+.fb-textarea_p4K5i {
+  display: flex;
+  min-block-size: 5rem;
+  inline-size: 100%;
+  border-radius: var(--fb-radius-md);
+  border: var(--fb-border-width) solid var(--fb-border);
+  background-color: var(--fb-background);
+  padding-inline: var(--fb-space-12);
+  padding-block: var(--fb-space-sm);
+  font-size: var(--fb-font-size-sm);
+  color: var(--fb-text);
+}
+
+.fb-textarea_p4K5i::placeholder {
+  color: var(--fb-text-muted);
+}
+
+.fb-textarea_p4K5i:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--fb-border);
+}
+
+.fb-textarea_p4K5i:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
 .fb-vcContainer_oHl8H {
   cursor: text;
   display: flex;