doom-design-system 0.5.0 → 0.6.0

package/dist/components/SplitButton/SplitButton.module.css

@@ -1,88 +1,105 @@
-.container {
-  display: inline-flex;
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hard);
-  transition: all 0.1s ease;
-}
-.container.primary {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-}
-.container.secondary {
-  background-color: var(--secondary);
-  color: var(--secondary-foreground);
-}
-.container:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--shadow-base);
-}
-.container[data-state=open] {
-  transform: translate(calc(-1 * var(--spacing-half)), calc(-1 * var(--spacing-half)));
-  box-shadow: var(--spacing-2) var(--spacing-2) 0px 0px var(--shadow-primary);
-  border: var(--border-width) solid var(--shadow-primary);
-}
-
-.mainButton {
-  border: none;
-  background: transparent;
-  color: inherit;
-  padding: var(--spacing-3) var(--spacing-4);
-  padding-right: var(--spacing-3);
-  font-weight: 700;
-  font-size: var(--text-base);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  border-right: var(--border-width) solid rgba(0, 0, 0, 0.2);
-  min-height: var(--control-height-md);
-  box-sizing: border-box;
-}
-.mainButton:hover {
-  background-color: rgba(0, 0, 0, 0.25);
-}
-
-.dropdownTrigger {
-  border: none;
-  background: transparent;
-  color: inherit;
-  padding: var(--spacing-3);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  min-height: var(--control-height-md);
-  box-sizing: border-box;
-}
-.dropdownTrigger:hover {
-  background-color: rgba(0, 0, 0, 0.25);
-}
-
-.menu {
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--primary);
-  border-radius: var(--radius);
-  box-shadow: var(--spacing-2) var(--spacing-2) 0px 0px var(--shadow-primary);
-  min-width: var(--spacing-56);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  padding: var(--spacing-1);
-}
-
-.item {
-  text-align: left;
-  padding: var(--spacing-3) var(--spacing-4);
-  background: transparent;
-  border: none;
-  color: var(--foreground);
-  cursor: pointer;
-  border-radius: calc(var(--radius) - var(--border-width));
-  font-size: var(--text-base);
-  font-weight: 600;
-  transition: background-color 0.2s;
-}
-.item:hover {
-  background-color: color-mix(in srgb, var(--primary), transparent 85%);
-  color: var(--primary);
+@layer doom.components {
+  .container {
+    display: inline-flex;
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--control-radius);
+    box-shadow: var(--shadow-md);
+    transition: all var(--duration-fast) var(--ease-in-out);
+  }
+  .container.primary {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .container.secondary {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+  .container:hover {
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-lg);
+  }
+  .container[data-state=open] {
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-offset-xl) var(--shadow-primary);
+    border: var(--surface-border-width) solid var(--shadow-primary);
+  }
+  .mainButton {
+    border: none;
+    background: transparent;
+    color: inherit;
+    padding: var(--control-padding-y) var(--control-padding-x);
+    padding-right: var(--control-padding-y);
+    font-weight: 700;
+    font-size: var(--control-font-size);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    border-right: var(--surface-border-width) solid rgba(0, 0, 0, 0.2);
+    min-height: var(--control-height);
+    box-sizing: border-box;
+  }
+  .mainButton:hover {
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+  .dropdownTrigger {
+    border: none;
+    background: transparent;
+    color: inherit;
+    padding: var(--control-padding-y);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    min-height: var(--control-height);
+    box-sizing: border-box;
+  }
+  .dropdownTrigger:hover {
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+  .menu {
+    background: var(--card-bg);
+    border: var(--surface-border-width) solid var(--primary);
+    border-radius: var(--control-radius);
+    box-shadow: var(--shadow-offset-xl) var(--shadow-primary);
+    min-width: 20ch;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-1);
+  }
+  .item {
+    text-align: left;
+    padding: var(--control-padding-y) var(--control-padding-x);
+    background: transparent;
+    border: none;
+    color: var(--foreground);
+    cursor: pointer;
+    border-radius: calc(var(--control-radius) - var(--surface-border-width));
+    font-size: var(--control-font-size);
+    font-weight: 600;
+    transition: background-color var(--duration-fast) var(--ease-in-out);
+  }
+  .item:hover {
+    background-color: color-mix(in srgb, var(--primary), transparent 85%);
+    color: var(--primary);
+  }
+  /* Sizes */
+  .sm {
+    --control-height: var(--size-7);
+    --control-padding-x: var(--space-2);
+    --control-padding-y: var(--space-1);
+    --control-font-size: var(--text-xs);
+    --control-icon-size: var(--size-4);
+    --control-gap: var(--space-1);
+    --control-radius: var(--radius-sm);
+  }
+  .lg {
+    --control-height: var(--size-10);
+    --control-padding-x: var(--space-4);
+    --control-padding-y: var(--space-2);
+    --control-font-size: var(--text-base);
+    --control-icon-size: var(--size-5);
+    --control-gap: var(--space-2);
+    --control-radius: var(--radius-md);
+  }
 }

package/dist/components/Switch/Switch.module.css

@@ -1,64 +1,65 @@
-.switchContainer {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  cursor: pointer;
-  opacity: 1;
-  user-select: none;
-}
-.switchContainer.disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.toggle {
-  position: relative;
-  width: calc(var(--spacing-12) + var(--spacing-2));
-  height: var(--spacing-8);
-  background-color: var(--card-bg);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius-pill);
-  transition: background-color var(--duration-normal) var(--ease-in-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
-  box-shadow: var(--shadow-sm);
-  box-sizing: border-box;
-}
-.toggle::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: var(--spacing-1);
-  width: var(--spacing-6);
-  height: var(--spacing-6);
-  background-color: var(--muted);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: 50%;
-  transform: translateY(-50%) translateX(0);
-  transition: transform var(--duration-normal) var(--ease-in-out), background-color var(--duration-normal) var(--ease-in-out);
-  box-sizing: border-box;
-}
-.toggle.checked {
-  background-color: var(--primary);
-}
-.toggle.checked::after {
-  background-color: var(--primary-foreground);
-  transform: translateY(-50%) translateX(var(--spacing-5));
-}
-
-.label {
-  font-family: var(--font-heading);
-  font-weight: var(--font-semibold);
-  color: var(--foreground);
+@layer doom.components {
+  .switchContainer {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+    cursor: pointer;
+    opacity: 1;
+    user-select: none;
+  }
+  .switchContainer.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: calc(-1 * var(--space-px));
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .toggle {
+    --_switch-inset: var(--space-0\.5);
+    --_thumb-size: calc(var(--switch-height) - 2 * var(--_switch-inset) - 2 * var(--surface-border-width));
+    position: relative;
+    width: var(--switch-width);
+    height: var(--switch-height);
+    background-color: var(--card-bg);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--radius-pill);
+    transition: background-color var(--duration-normal) var(--ease-in-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
+    box-shadow: var(--shadow-sm);
+    box-sizing: border-box;
+  }
+  .toggle::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: var(--_switch-inset);
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
+    background-color: var(--muted);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: 50%;
+    transform: translateY(-50%) translateX(0);
+    transition: transform var(--duration-normal) var(--ease-in-out), background-color var(--duration-normal) var(--ease-in-out);
+    box-sizing: border-box;
+  }
+  .toggle.checked {
+    background-color: var(--primary);
+  }
+  .toggle.checked::after {
+    background-color: var(--primary-foreground);
+    transform: translateY(-50%) translateX(calc(var(--switch-width) - var(--_thumb-size) - 2 * var(--_switch-inset) - 2 * var(--surface-border-width)));
+  }
+  .label {
+    font-family: var(--font-heading);
+    font-weight: var(--font-semibold);
+    color: var(--foreground);
+  }
 }

package/dist/components/Table/FilterBuilder/FilterBuilder.module.css

@@ -1,40 +1,40 @@
-.filterBar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-2);
-  background: var(--surface-bg);
-  border-top: var(--border-width) solid var(--card-border);
-}
-@media (max-width: 768px) {
+@layer doom.components {
   .filterBar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    background: var(--surface-bg);
+    border-top: var(--surface-border-width) solid var(--card-border);
+  }
+  @media (max-width: 768px) {
+    .filterBar {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+  .popoverContent {
+    display: flex;
     flex-direction: column;
-    align-items: stretch;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    min-width: 20ch;
+  }
+  .textInput {
+    padding: var(--space-2);
+    font-family: var(--font-family);
+    font-size: var(--text-sm);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--radius-md);
+    background: var(--surface-bg);
+    color: var(--foreground);
+  }
+  .textInput:focus {
+    outline: none;
+    border-color: var(--primary);
+  }
+  .textInput::placeholder {
+    color: var(--muted-foreground);
   }
-}
-
-.popoverContent {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-  padding: var(--spacing-2);
-  min-width: var(--spacing-56);
-}
-
-.textInput {
-  padding: var(--spacing-2);
-  font-family: var(--font-family);
-  font-size: var(--text-sm);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  background: var(--surface-bg);
-  color: var(--foreground);
-}
-.textInput:focus {
-  outline: none;
-  border-color: var(--primary);
-}
-.textInput::placeholder {
-  color: var(--muted-foreground);
 }

package/dist/components/Table/FilterBuilder/FilterConditionRow.js

@@ -26,5 +26,5 @@ export function FilterConditionRow({ condition, fields, onChange, onRemove, }) {
     return (_jsxs("div", { className: styles.row, children: [_jsx(Select, { className: styles.fieldSelect, options: fields.map((f) => ({ value: f.key, label: f.label })), placeholder: "Field...", value: condition.field, onChange: (e) => handleFieldChange(e.target.value) }), _jsx(Select, { className: styles.operatorSelect, options: availableOperators.map((op) => ({
                     value: op,
                     label: OPERATORS[op].label,
-                })), value: condition.operator, onChange: (e) => handleOperatorChange(e.target.value) }), (selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === "select" && selectedField.options ? (_jsx(Select, { className: styles.valueSelect, options: selectedField.options, placeholder: "Value...", value: condition.value, onChange: (e) => handleValueChange(e.target.value) })) : (_jsx(Input, { className: styles.valueInput, placeholder: "Value...", value: condition.value, onChange: (e) => handleValueChange(e.target.value) })), _jsx(Button, { "aria-label": "Remove condition", size: "sm", variant: "ghost", onClick: onRemove, children: _jsx(Trash2, { size: 16 }) })] }));
+                })), value: condition.operator, onChange: (e) => handleOperatorChange(e.target.value) }), (selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === "select" && selectedField.options ? (_jsx(Select, { className: styles.valueSelect, options: selectedField.options, placeholder: "Value...", value: condition.value, onChange: (e) => handleValueChange(e.target.value) })) : (_jsx(Input, { className: styles.valueInput, placeholder: "Value...", value: condition.value, onChange: (e) => handleValueChange(e.target.value) })), _jsx(Button, { "aria-label": "Remove condition", size: "sm", variant: "ghost", onClick: onRemove, children: _jsx(Trash2, { size: 20 }) })] }));
 }

package/dist/components/Table/FilterBuilder/FilterConditionRow.module.css

@@ -1,23 +1,22 @@
-.row {
-  display: grid;
-  grid-template-columns: minmax(var(--form-col-min), 1fr) var(--form-select-width) minmax(var(--form-col-min), 1fr) auto;
-  align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-2);
-  background: var(--surface-bg);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-}
-
-.fieldSelect {
-  width: 100%;
-}
-
-.operatorSelect {
-  width: 100%;
-}
-
-.valueSelect,
-.valueInput {
-  width: 100%;
+@layer doom.components {
+  .row {
+    display: grid;
+    grid-template-columns: minmax(var(--form-col-min), 1fr) var(--form-select-width) minmax(var(--form-col-min), 1fr) auto;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    background: var(--surface-bg);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--radius-md);
+  }
+  .fieldSelect {
+    width: 100%;
+  }
+  .operatorSelect {
+    width: 100%;
+  }
+  .valueSelect,
+  .valueInput {
+    width: 100%;
+  }
 }

package/dist/components/Table/FilterBuilder/FilterGroup.js

@@ -47,10 +47,10 @@ export function ConditionRow({ item, fields, parentId: _parentId, logic, showLog
         "neq",
         "contains",
     ];
-    return (_jsxs(Card.Root, { ref: setNodeRef, className: clsx(styles.conditionRow, isDragging && styles.dragging, activeDrops > 0 && styles.zIndexHigh), children: [_jsx(DropZone, { className: clsx(styles.dropZoneInside, showZones && styles.zoneActive), position: "inside", targetId: item.id, onHoverChange: handleHoverChange }), _jsx(DropZone, { className: clsx(styles.dropZoneBefore, showZones && styles.zoneActive), position: "before", targetId: item.id, onHoverChange: handleHoverChange }), _jsx(DropZone, { className: clsx(styles.dropZoneAfter, showZones && styles.zoneActive), position: "after", targetId: item.id, onHoverChange: handleHoverChange }), _jsxs("div", { className: styles.conditionHeader, children: [_jsx("div", Object.assign({ className: styles.dragHandle, onContextMenu: (e) => e.preventDefault() }, listeners, attributes, { children: _jsx(GripVertical, { size: 16 }) })), showLogic && logic && onLogicChange ? (_jsx("div", { className: styles.logicWrapper, children: _jsx(Select, { options: [
+    return (_jsxs(Card.Root, { ref: setNodeRef, className: clsx(styles.conditionRow, isDragging && styles.dragging, activeDrops > 0 && styles.zIndexHigh), children: [_jsx(DropZone, { className: clsx(styles.dropZoneInside, showZones && styles.zoneActive), position: "inside", targetId: item.id, onHoverChange: handleHoverChange }), _jsx(DropZone, { className: clsx(styles.dropZoneBefore, showZones && styles.zoneActive), position: "before", targetId: item.id, onHoverChange: handleHoverChange }), _jsx(DropZone, { className: clsx(styles.dropZoneAfter, showZones && styles.zoneActive), position: "after", targetId: item.id, onHoverChange: handleHoverChange }), _jsxs("div", { className: styles.conditionHeader, children: [_jsx("div", Object.assign({ className: styles.dragHandle, onContextMenu: (e) => e.preventDefault() }, listeners, attributes, { children: _jsx(GripVertical, { size: 20 }) })), showLogic && logic && onLogicChange ? (_jsx("div", { className: styles.logicWrapper, children: _jsx(Select, { options: [
                                 { value: "and", label: "AND" },
                                 { value: "or", label: "OR" },
-                            ], size: "sm", value: logic, onChange: (e) => onLogicChange(e.target.value) }) })) : (_jsx("div", { className: styles.whereWrapper, children: _jsx(Badge, { className: styles.whereBadge, size: "lg", variant: "secondary", children: "WHERE" }) })), _jsx(Button, { "aria-label": isCollapsed ? "Expand" : "Collapse", className: styles.mobileCollapseToggle, size: "sm", variant: "ghost", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) }), _jsx(Button, { "aria-label": "Remove", className: styles.mobileRemoveButton, size: "sm", variant: "ghost", onClick: onRemove, children: _jsx(Trash2, { size: 14 }) })] }), isCollapsed && (_jsxs(Text, { className: styles.collapsedConditionSummary, color: "muted", variant: "body", onClick: () => setIsCollapsed(false), children: [(selectedField === null || selectedField === void 0 ? void 0 : selectedField.label) || item.field || "Field", " ", _jsx("strong", { children: ((_b = OPERATORS[item.operator]) === null || _b === void 0 ? void 0 : _b.label) || item.operator }), " ", item.value || "..."] })), _jsxs("div", { className: clsx(styles.conditionFields, isCollapsed && styles.conditionFieldsCollapsed), children: [_jsx(Select, { className: styles.fieldSelect, options: fields.map((f) => ({ value: f.key, label: f.label })), placeholder: "Field...", value: item.field, onChange: (e) => onUpdate(Object.assign(Object.assign({}, item), { field: e.target.value, value: "" })) }), _jsx(Select, { className: styles.operatorSelect, options: availableOperators.map((op) => ({
+                            ], size: "sm", value: logic, onChange: (e) => onLogicChange(e.target.value) }) })) : (_jsx("div", { className: styles.whereWrapper, children: _jsx(Badge, { className: styles.whereBadge, size: "lg", variant: "secondary", children: "WHERE" }) })), _jsx(Button, { "aria-label": isCollapsed ? "Expand" : "Collapse", className: styles.mobileCollapseToggle, size: "sm", variant: "ghost", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(ChevronRight, { size: 20 }) : _jsx(ChevronDown, { size: 20 }) }), _jsx(Button, { "aria-label": "Remove", className: styles.mobileRemoveButton, size: "sm", variant: "ghost", onClick: onRemove, children: _jsx(Trash2, { size: 14 }) })] }), isCollapsed && (_jsxs(Text, { className: styles.collapsedConditionSummary, color: "muted", variant: "body", onClick: () => setIsCollapsed(false), children: [(selectedField === null || selectedField === void 0 ? void 0 : selectedField.label) || item.field || "Field", " ", _jsx("strong", { children: ((_b = OPERATORS[item.operator]) === null || _b === void 0 ? void 0 : _b.label) || item.operator }), " ", item.value || "..."] })), _jsxs("div", { className: clsx(styles.conditionFields, isCollapsed && styles.conditionFieldsCollapsed), children: [_jsx(Select, { className: styles.fieldSelect, options: fields.map((f) => ({ value: f.key, label: f.label })), placeholder: "Field...", value: item.field, onChange: (e) => onUpdate(Object.assign(Object.assign({}, item), { field: e.target.value, value: "" })) }), _jsx(Select, { className: styles.operatorSelect, options: availableOperators.map((op) => ({
                             value: op,
                             label: OPERATORS[op].label,
                         })), value: item.operator, onChange: (e) => onUpdate(Object.assign(Object.assign({}, item), { operator: e.target.value })) }), (selectedField === null || selectedField === void 0 ? void 0 : selectedField.type) === "select" && selectedField.options ? (_jsx(Select, { className: styles.valueSelect, options: selectedField.options, placeholder: "Value...", value: item.value, onChange: (e) => onUpdate(Object.assign(Object.assign({}, item), { value: e.target.value })) })) : (_jsx(Input, { className: styles.valueInput, placeholder: "Value...", value: item.value, onChange: (e) => onUpdate(Object.assign(Object.assign({}, item), { value: e.target.value })) }))] }), _jsx(Button, { "aria-label": "Remove", className: styles.desktopRemoveButton, size: "sm", variant: "ghost", onClick: onRemove, children: _jsx(Trash2, { size: 14 }) })] }));
@@ -106,9 +106,9 @@ export function FilterGroup({ item, fields, parentId: _parentId, depth = 0, show
     };
     const conditionCount = countConditions(item);
     const isEmpty = item.children.length === 0;
-    return (_jsxs(Card.Root, { ref: setNodeRef, className: clsx(styles.group, depth === 0 && styles.rootGroup, depth > 0 && styles.hasRail, isCollapsed && styles.collapsed, isDragging && styles.dragging, activeDrops > 0 && styles.zIndexHigh), children: [depth > 0 && (_jsxs(_Fragment, { children: [_jsx(DropZone, { className: clsx(styles.dropZoneInside, showZones && styles.zoneActive), position: "inside", targetId: item.id, onHoverChange: handleHoverChange }), _jsx(DropZone, { className: clsx(styles.groupDropZoneBefore, showZones && styles.zoneActive), position: "before", targetId: item.id, onHoverChange: handleHoverChange }), _jsx(DropZone, { className: clsx(styles.groupDropZoneAfter, showZones && styles.zoneActive), position: "after", targetId: item.id, onHoverChange: handleHoverChange })] })), _jsxs("div", { className: styles.groupHeader, children: [_jsx("div", Object.assign({ className: styles.dragHandle, onContextMenu: (e) => e.preventDefault() }, listeners, attributes, { children: _jsx(GripVertical, { size: 16 }) })), depth > 0 &&
+    return (_jsxs(Card.Root, { ref: setNodeRef, className: clsx(styles.group, depth === 0 && styles.rootGroup, depth > 0 && styles.hasRail, isCollapsed && styles.collapsed, isDragging && styles.dragging, activeDrops > 0 && styles.zIndexHigh), children: [depth > 0 && (_jsxs(_Fragment, { children: [_jsx(DropZone, { className: clsx(styles.dropZoneInside, showZones && styles.zoneActive), position: "inside", targetId: item.id, onHoverChange: handleHoverChange }), _jsx(DropZone, { className: clsx(styles.groupDropZoneBefore, showZones && styles.zoneActive), position: "before", targetId: item.id, onHoverChange: handleHoverChange }), _jsx(DropZone, { className: clsx(styles.groupDropZoneAfter, showZones && styles.zoneActive), position: "after", targetId: item.id, onHoverChange: handleHoverChange })] })), _jsxs("div", { className: styles.groupHeader, children: [_jsx("div", Object.assign({ className: styles.dragHandle, onContextMenu: (e) => e.preventDefault() }, listeners, attributes, { children: _jsx(GripVertical, { size: 20 }) })), depth > 0 &&
                         (showLogic && item.logic && onLogicChange ? (_jsx("div", { className: styles.logicWrapper, children: _jsx(Select, { options: [
                                     { value: "and", label: "AND" },
                                     { value: "or", label: "OR" },
-                                ], size: "sm", value: item.logic, onChange: (e) => onLogicChange(e.target.value) }) })) : (_jsx("div", { className: styles.whereWrapper, children: _jsx(Badge, { className: styles.whereBadge, size: "lg", variant: "secondary", children: "WHERE" }) }))), _jsx(Button, { "aria-label": isCollapsed ? "Expand group" : "Collapse group", className: styles.collapseToggle, size: "sm", variant: "ghost", onClick: toggleCollapse, children: isCollapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) }), isCollapsed && (_jsxs(Text, { className: styles.collapsedSummary, color: "muted", variant: "caption", children: ["(", conditionCount, " condition", conditionCount !== 1 ? "s" : "", ")"] })), _jsx("div", { className: styles.headerSpacer }), onRemove && (_jsx(Button, { "aria-label": "Remove group", size: "sm", variant: "ghost", onClick: onRemove, children: _jsx(Trash2, { size: 14 }) }))] }), _jsx("div", { ref: contentRef, className: clsx(styles.groupContentWrapper, isCollapsed && styles.collapsedWrapper), children: _jsxs("div", { className: styles.groupContent, children: [isEmpty ? (_jsxs("div", { className: styles.emptyState, children: [_jsxs(Text, { color: "muted", variant: "small", children: ["Start by adding a condition", depth < MAX_DEPTH ? " or a group" : "", "."] }), _jsxs("div", { className: styles.emptyActions, children: [_jsxs(Button, { size: "sm", variant: "ghost", onClick: addCondition, children: [_jsx(Plus, { size: 14 }), " Add Condition"] }), _jsxs(Button, { disabled: depth >= MAX_DEPTH, size: "sm", variant: "ghost", onClick: addNestedGroup, children: [_jsx(Plus, { size: 14 }), " Add Group"] })] })] })) : (item.children.map((child, index) => (_jsx(React.Fragment, { children: child.type === "condition" ? (_jsx(ConditionRow, { fields: fields, isGlobalDragging: isGlobalDragging, item: child, logic: child.logic, parentId: item.id, showLogic: index > 0, onLogicChange: (newLogic) => updateChild(index, Object.assign(Object.assign({}, child), { logic: newLogic })), onRemove: () => removeChild(index), onUpdate: (updated) => updateChild(index, updated) })) : (_jsx("div", { className: styles.nestedGroupWrapper, children: _jsx(FilterGroup, { depth: depth + 1, fields: fields, isGlobalDragging: isGlobalDragging, item: child, parentId: item.id, showLogic: index > 0, onLogicChange: (newLogic) => updateChild(index, Object.assign(Object.assign({}, child), { logic: newLogic })), onRemove: () => removeChild(index), onRemoveSourceById: removeChildById, onUpdate: (updated) => updateChild(index, updated) }) })) }, child.id)))), !isEmpty && (_jsxs("div", { className: styles.groupActions, children: [_jsxs(Button, { size: "sm", variant: "ghost", onClick: addCondition, children: [_jsx(Plus, { size: 14 }), " Condition"] }), _jsxs(Button, { disabled: depth >= MAX_DEPTH, size: "sm", variant: "ghost", onClick: addNestedGroup, children: [_jsx(Plus, { size: 14 }), " Add Group"] })] }))] }) })] }));
+                                ], size: "sm", value: item.logic, onChange: (e) => onLogicChange(e.target.value) }) })) : (_jsx("div", { className: styles.whereWrapper, children: _jsx(Badge, { className: styles.whereBadge, size: "lg", variant: "secondary", children: "WHERE" }) }))), _jsx(Button, { "aria-label": isCollapsed ? "Expand group" : "Collapse group", className: styles.collapseToggle, size: "sm", variant: "ghost", onClick: toggleCollapse, children: isCollapsed ? _jsx(ChevronRight, { size: 20 }) : _jsx(ChevronDown, { size: 20 }) }), isCollapsed && (_jsxs(Text, { className: styles.collapsedSummary, color: "muted", variant: "caption", children: ["(", conditionCount, " condition", conditionCount !== 1 ? "s" : "", ")"] })), _jsx("div", { className: styles.headerSpacer }), onRemove && (_jsx(Button, { "aria-label": "Remove group", size: "sm", variant: "ghost", onClick: onRemove, children: _jsx(Trash2, { size: 14 }) }))] }), _jsx("div", { ref: contentRef, className: clsx(styles.groupContentWrapper, isCollapsed && styles.collapsedWrapper), children: _jsxs("div", { className: styles.groupContent, children: [isEmpty ? (_jsxs("div", { className: styles.emptyState, children: [_jsxs(Text, { color: "muted", variant: "small", children: ["Start by adding a condition", depth < MAX_DEPTH ? " or a group" : "", "."] }), _jsxs("div", { className: styles.emptyActions, children: [_jsxs(Button, { size: "sm", variant: "ghost", onClick: addCondition, children: [_jsx(Plus, { size: 14 }), " Add Condition"] }), _jsxs(Button, { disabled: depth >= MAX_DEPTH, size: "sm", variant: "ghost", onClick: addNestedGroup, children: [_jsx(Plus, { size: 14 }), " Add Group"] })] })] })) : (item.children.map((child, index) => (_jsx(React.Fragment, { children: child.type === "condition" ? (_jsx(ConditionRow, { fields: fields, isGlobalDragging: isGlobalDragging, item: child, logic: child.logic, parentId: item.id, showLogic: index > 0, onLogicChange: (newLogic) => updateChild(index, Object.assign(Object.assign({}, child), { logic: newLogic })), onRemove: () => removeChild(index), onUpdate: (updated) => updateChild(index, updated) })) : (_jsx("div", { className: styles.nestedGroupWrapper, children: _jsx(FilterGroup, { depth: depth + 1, fields: fields, isGlobalDragging: isGlobalDragging, item: child, parentId: item.id, showLogic: index > 0, onLogicChange: (newLogic) => updateChild(index, Object.assign(Object.assign({}, child), { logic: newLogic })), onRemove: () => removeChild(index), onRemoveSourceById: removeChildById, onUpdate: (updated) => updateChild(index, updated) }) })) }, child.id)))), !isEmpty && (_jsxs("div", { className: styles.groupActions, children: [_jsxs(Button, { size: "sm", variant: "ghost", onClick: addCondition, children: [_jsx(Plus, { size: 14 }), " Condition"] }), _jsxs(Button, { disabled: depth >= MAX_DEPTH, size: "sm", variant: "ghost", onClick: addNestedGroup, children: [_jsx(Plus, { size: 14 }), " Add Group"] })] }))] }) })] }));
 }