@tempots/beatui 0.68.0 → 0.71.0

package/dist/beatui.css

@@ -4708,6 +4708,407 @@ a:focus-visible {
   color: var(--color-danger-400);
 }
 
+/**
+ * JSON Structure Form Component Styles
+ *
+ * CSS styles for JSON Structure form components.
+ * Uses BEM-like naming with bc-json-structure- prefix.
+ */
+
+/* =============================================================================
+   Base Styles
+   ============================================================================= */
+
+.bc-json-structure-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
+}
+
+/* =============================================================================
+   Object Layout
+   ============================================================================= */
+
+.bc-json-structure-object {
+  border-left: calc(var(--spacing-base) * 2) solid var(--color-base-200);
+  padding-inline-start: calc(var(--spacing-base) * 2);
+}
+
+.bc-json-structure-object-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-md, calc(var(--spacing-base) * 3));
+}
+
+.bc-json-structure-object--nested {
+  margin-top: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+}
+
+/* Additional properties */
+.bc-json-structure-additional-property {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-xs, var(--spacing-base));
+  padding: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+  border: 1px solid var(--color-base-200);
+  border-radius: var(--radius-sm);
+  background: var(--color-base-50);
+}
+
+.bc-json-structure-additional-property-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+}
+
+.bc-json-structure-additional-property-value {
+  padding-inline-start: calc(var(--spacing-base) * 2);
+}
+
+/* =============================================================================
+   Array/Set/Map Layout
+   ============================================================================= */
+
+.bc-json-structure-array,
+.bc-json-structure-set,
+.bc-json-structure-map {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+}
+
+.bc-json-structure-array-items,
+.bc-json-structure-set-items,
+.bc-json-structure-map-entries {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+}
+
+.bc-json-structure-array-item,
+.bc-json-structure-set-item,
+.bc-json-structure-map-entry {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+}
+
+.bc-json-structure-array-item-content,
+.bc-json-structure-set-item-content,
+.bc-json-structure-map-entry-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.bc-json-structure-array-item-actions,
+.bc-json-structure-set-item-actions,
+.bc-json-structure-map-entry-actions {
+  flex-shrink: 0;
+}
+
+.bc-json-structure-collection-add {
+  margin-top: var(--spacing-stack-xs, var(--spacing-base));
+}
+
+/* Map entry specific styles */
+.bc-json-structure-map-entry-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+  margin-bottom: var(--spacing-stack-xs, var(--spacing-base));
+}
+
+.bc-json-structure-map-entry-key {
+  font-family: var(--font-family-mono);
+  font-weight: 600;
+  color: var(--color-base-700);
+}
+
+.bc-json-structure-map-entry-value {
+  padding-inline-start: calc(var(--spacing-base) * 2);
+}
+
+/* Set error indicator */
+.bc-json-structure-set-error {
+  color: var(--color-error-500, #dc2626);
+  font-size: var(--font-size-sm);
+  margin-top: var(--spacing-stack-xs, var(--spacing-base));
+}
+
+/* =============================================================================
+   Tuple Layout
+   ============================================================================= */
+
+.bc-json-structure-tuple {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+}
+
+.bc-json-structure-tuple-label {
+  font-weight: 600;
+  color: var(--color-base-700);
+  margin-bottom: var(--spacing-stack-xs, var(--spacing-base));
+}
+
+.bc-json-structure-tuple-description {
+  color: var(--color-base-500);
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--spacing-stack-xs, var(--spacing-base));
+}
+
+.bc-json-structure-tuple-elements {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+}
+
+.bc-json-structure-tuple-element {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-xs, var(--spacing-base));
+}
+
+.bc-json-structure-tuple-element-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-inline-xs, calc(var(--spacing-base) * 0.5));
+  color: var(--color-base-600);
+  font-size: var(--font-size-sm);
+}
+
+.bc-json-structure-tuple-position {
+  font-family: var(--font-family-mono);
+  font-weight: 600;
+  color: var(--color-base-500);
+}
+
+.bc-json-structure-tuple-element-name {
+  font-weight: 500;
+}
+
+.bc-json-structure-tuple-element-control {
+  padding-inline-start: calc(var(--spacing-base) * 2);
+}
+
+/* =============================================================================
+   Choice Layout
+   ============================================================================= */
+
+.bc-json-structure-choice {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+}
+
+.bc-json-structure-choice-selector {
+  margin-bottom: var(--spacing-stack-sm, calc(var(--spacing-base) * 2));
+}
+
+.bc-json-structure-choice-options {
+  padding-inline-start: calc(var(--spacing-base) * 2);
+}
+
+/* =============================================================================
+   Grid Layout (for objects with many properties)
+   ============================================================================= */
+
+.bc-structure-grid {
+  display: grid;
+}
+
+.bc-structure-grid--gap-4 {
+  gap: var(--spacing-stack-lg, calc(var(--spacing-base) * 4));
+}
+
+.bc-structure-grid--cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.bc-structure-grid--cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.bc-structure-grid--cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.bc-structure-grid--cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+@media (width >= 40rem) {
+  .bc-structure-grid--cols-sm-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .bc-structure-grid--cols-sm-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .bc-structure-grid--cols-sm-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .bc-structure-grid--cols-sm-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (width >= 48rem) {
+  .bc-structure-grid--cols-md-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .bc-structure-grid--cols-md-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .bc-structure-grid--cols-md-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .bc-structure-grid--cols-md-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (width >= 64rem) {
+  .bc-structure-grid--cols-lg-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .bc-structure-grid--cols-lg-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .bc-structure-grid--cols-lg-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .bc-structure-grid--cols-lg-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+/* =============================================================================
+   Validation States
+   ============================================================================= */
+
+.bc-json-structure-error {
+  color: var(--color-error-500, #dc2626);
+  font-size: var(--font-size-sm);
+  margin-top: var(--spacing-stack-xs, var(--spacing-base));
+}
+
+.bc-json-structure-field--invalid {
+  --field-border-color: var(--color-error-500, #dc2626);
+}
+
+.bc-json-structure-field--valid {
+  --field-border-color: var(--color-success-500, #16a34a);
+}
+
+/* =============================================================================
+   Metadata Display
+   ============================================================================= */
+
+.bc-json-structure-description {
+  color: var(--color-base-500);
+  font-size: var(--font-size-sm);
+  margin-top: var(--spacing-stack-xs, var(--spacing-base));
+}
+
+.bc-json-structure-deprecated {
+  opacity: 0.7;
+  position: relative;
+}
+
+.bc-json-structure-deprecated::before {
+  content: '(deprecated)';
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-warning-500, #d97706);
+  background: var(--color-warning-100, #fef3c7);
+  padding: 0.125em 0.5em;
+  border-radius: var(--radius-sm);
+}
+
+.bc-json-structure-deprecated-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-inline-xs, calc(var(--spacing-base) * 0.5));
+  font-size: var(--font-size-xs);
+  color: var(--color-warning-700);
+  background: var(--color-warning-100);
+  padding: 0.125em 0.5em;
+  border-radius: var(--radius-sm);
+  margin-inline-start: var(
+    --spacing-inline-xs,
+    calc(var(--spacing-base) * 0.5)
+  );
+}
+
+.bc-json-structure-required-indicator {
+  color: var(--color-error-500, #dc2626);
+  margin-inline-start: 0.25em;
+}
+
+/* =============================================================================
+   Const/Enum Display
+   ============================================================================= */
+
+.bc-json-structure-const {
+  font-family: var(--font-family-mono);
+  background: var(--color-base-100);
+  padding: var(--spacing-inline-xs, calc(var(--spacing-base) * 0.5))
+    var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+  border-radius: var(--radius-sm);
+  color: var(--color-base-600);
+}
+
+/* =============================================================================
+   Read-Only State
+   ============================================================================= */
+
+.bc-json-structure-readonly {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.bc-json-structure-readonly input,
+.bc-json-structure-readonly select,
+.bc-json-structure-readonly textarea {
+  background: var(--color-base-100);
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Placeholder Styles (temporary, for development)
+   ============================================================================= */
+
+.bc-json-structure-placeholder {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-xs, var(--spacing-base));
+  padding: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+  border: 1px dashed var(--color-base-300);
+  border-radius: var(--radius-md);
+  background: var(--color-base-50);
+}
+
+.bc-json-structure-placeholder > span:first-child {
+  font-size: var(--font-size-xs);
+  color: var(--color-base-400);
+  font-family: var(--font-family-mono);
+}
+
+.bc-json-structure-unknown {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-stack-xs, var(--spacing-base));
+  padding: var(--spacing-inline-sm, calc(var(--spacing-base) * 2));
+  border: 1px solid var(--color-warning-300);
+  border-radius: var(--radius-md);
+  background: var(--color-warning-50);
+  color: var(--color-warning-700);
+}
+
 .bc-label {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);