@process.co/ui 0.0.16 → 0.0.17

package/css/ui.css

@@ -1059,6 +1059,9 @@
   .uii\:flex {
     display: flex;
   }
+  .uii\:inline-block {
+    display: inline-block;
+  }
   .uii\:inline-flex {
     display: inline-flex;
   }
@@ -1091,6 +1094,9 @@
   .uii\:h-10 {
     height: calc(var(--uii-spacing) * 10);
   }
+  .uii\:h-\[56px\] {
+    height: 56px;
+  }
   .uii\:h-\[var\(--radix-select-trigger-height\)\] {
     height: var(--radix-select-trigger-height);
   }
@@ -1112,6 +1118,12 @@
   .uii\:max-h-\[min\(20rem\,80vh\)\] {
     max-height: min(20rem, 80vh);
   }
+  .uii\:min-h-\[56px\] {
+    min-height: 56px;
+  }
+  .uii\:w-\[28px\] {
+    width: 28px;
+  }
   .uii\:w-full {
     width: 100%;
   }
@@ -1124,6 +1136,9 @@
   .uii\:min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .uii\:min-w-\[28px\] {
+    min-width: 28px;
+  }
   .uii\:min-w-\[150px\] {
     min-width: 150px;
   }
@@ -1139,6 +1154,9 @@
   .uii\:shrink-0 {
     flex-shrink: 0;
   }
+  .uii\:\[transform\:rotate\(-90deg\)\] {
+    transform: rotate(-90deg);
+  }
   .uii\:cursor-default {
     cursor: default;
   }
@@ -1231,6 +1249,9 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .uii\:border-\[\#e5e7eb\] {
+    border-color: #e5e7eb;
+  }
   .uii\:border-amber-500\/30 {
     border-color: color-mix(in oklab, oklch(76.9% 0.188 70.08) 30%, transparent);
   }
@@ -1508,6 +1529,11 @@
     transition-timing-function: var(--tw-ease, var(--uii-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--uii-default-transition-duration));
   }
+  .uii\:transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--uii-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--uii-default-transition-duration));
+  }
   .uii\:outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1647,12 +1673,23 @@
       border-color: var(--ring);
     }
   }
+  .uii\:focus-visible\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .uii\:focus-visible\:ring-\[3px\] {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .uii\:focus-visible\:ring-\[\#3b82f6\]\/40 {
+    &:focus-visible {
+      --tw-ring-color: color-mix(in oklab, #3b82f6 40%, transparent);
+    }
+  }
   .uii\:focus-visible\:ring-destructive\/20 {
     &:focus-visible {
       --tw-ring-color: var(--destructive);
@@ -1669,6 +1706,12 @@
       }
     }
   }
+  .uii\:focus-visible\:ring-offset-1 {
+    &:focus-visible {
+      --tw-ring-offset-width: 1px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .uii\:disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -1879,11 +1922,30 @@
       border-color: transparent;
     }
   }
+  .uii\:data-\[state\=off\]\:bg-\[\#f3f4f6\] {
+    &[data-state="off"] {
+      background-color: #f3f4f6;
+    }
+  }
   .uii\:data-\[state\=off\]\:bg-background {
     &[data-state="off"] {
       background-color: var(--background);
     }
   }
+  .uii\:data-\[state\=off\]\:text-\[\#374151\] {
+    &[data-state="off"] {
+      color: #374151;
+    }
+  }
+  .uii\:data-\[state\=off\]\:hover\:bg-\[\#e5e7eb\] {
+    &[data-state="off"] {
+      &:hover {
+        @media (hover: hover) {
+          background-color: #e5e7eb;
+        }
+      }
+    }
+  }
   .uii\:data-\[state\=off\]\:hover\:bg-accent {
     &[data-state="off"] {
       &:hover {
@@ -1923,6 +1985,11 @@
       }
     }
   }
+  .uii\:data-\[state\=on\]\:border-\[\#3b82f6\] {
+    &[data-state="on"] {
+      border-color: #3b82f6;
+    }
+  }
   .uii\:data-\[state\=on\]\:border-input {
     &[data-state="on"] {
       border-color: var(--input);
@@ -1938,6 +2005,11 @@
       border-color: transparent;
     }
   }
+  .uii\:data-\[state\=on\]\:bg-\[\#3b82f6\] {
+    &[data-state="on"] {
+      background-color: #3b82f6;
+    }
+  }
   .uii\:data-\[state\=on\]\:bg-accent {
     &[data-state="on"] {
       background-color: var(--accent);
@@ -1968,6 +2040,11 @@
       color: var(--secondary-foreground);
     }
   }
+  .uii\:data-\[state\=on\]\:text-white {
+    &[data-state="on"] {
+      color: #fff;
+    }
+  }
   .uii\:data-\[state\=open\]\:bg-accent {
     &[data-state="open"] {
       background-color: var(--accent);

package/dist/components/fields/index.cjs

@@ -8822,6 +8822,23 @@ function ToggleButton({ className, variant, size: size4, ...props }) {
     }
   );
 }
+var logicToggleButtonStyles = [
+  "uii:inline-flex uii:items-center uii:justify-center uii:rounded-md uii:border uii:border-[#e5e7eb] uii:min-w-[28px] uii:w-[28px] uii:min-h-[56px] uii:h-[56px] uii:text-xs uii:font-bold uii:outline-none uii:focus-visible:ring-2 uii:focus-visible:ring-[#3b82f6]/40 uii:focus-visible:ring-offset-1 uii:disabled:pointer-events-none uii:disabled:opacity-50 uii:cursor-pointer uii:transition-colors uii:select-none",
+  "uii:data-[state=on]:bg-[#3b82f6] uii:data-[state=on]:text-white uii:data-[state=on]:border-[#3b82f6]",
+  "uii:data-[state=off]:bg-[#f3f4f6] uii:data-[state=off]:text-[#374151] uii:data-[state=off]:hover:bg-[#e5e7eb]"
+].join(" ");
+var logicToggleButtonLabelStyles = "uii:inline-block uii:whitespace-nowrap uii:[transform:rotate(-90deg)]";
+function LogicToggleButton({ className, children, ...props }) {
+  return /* @__PURE__ */ React33__namespace.createElement(
+    Root3,
+    {
+      "data-slot": "logic-toggle-button",
+      className: cn(logicToggleButtonStyles, className),
+      ...props
+    },
+    children != null ? /* @__PURE__ */ React33__namespace.createElement("span", { className: logicToggleButtonLabelStyles }, children) : null
+  );
+}
 
 // src/components/fields/types.ts
 function parseInferredTypes(typeStr) {
@@ -9246,6 +9263,7 @@ exports.Button = Button;
 exports.InferredTypesContext = InferredTypesContext;
 exports.InferredTypesProvider = InferredTypesProvider;
 exports.Input = Input;
+exports.LogicToggleButton = LogicToggleButton;
 exports.NestedFieldProvider = NestedFieldProvider;
 exports.NodePropertyProvider = NodePropertyProvider;
 exports.OPERATORS_BY_TYPE = OPERATORS_BY_TYPE;
@@ -9259,6 +9277,7 @@ exports.getNumberConstants = getNumberConstants;
 exports.getOperatorsForType = getOperatorsForType;
 exports.getStringConstants = getStringConstants;
 exports.intersectTypes = intersectTypes;
+exports.logicToggleButtonStyles = logicToggleButtonStyles;
 exports.normalizeFieldValue = normalizeFieldValue;
 exports.parseInferSyntax = parseInferSyntax;
 exports.parseInferredTypes = parseInferredTypes;