@process.co/ui 0.0.16 → 0.0.18

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);
   }
@@ -1240,6 +1261,9 @@
   .uii\:border-input {
     border-color: var(--input);
   }
+  .uii\:border-primary {
+    border-color: var(--primary);
+  }
   .uii\:border-purple-200 {
     border-color: oklch(90.2% 0.063 306.703);
   }
@@ -1508,6 +1532,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 +1676,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 +1709,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 +1925,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 +1988,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 +2008,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 +2043,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

@@ -3101,7 +3101,10 @@ function Input({
   required = false,
   hasRequiredError = false,
   className,
-  editorClassName
+  editorClassName,
+  showCaseSensitivity = false,
+  caseSensitive = false,
+  onCaseSensitiveChange
 }) {
   const devCtx = React33.useContext(DevContext);
   const resolvedExpectedType = useResolvedExpectedType(expectedType, devCtx);
@@ -3145,7 +3148,19 @@ function Input({
       title: resolvedExpectedType
     },
     resolvedExpectedType
-  ), showError && /* @__PURE__ */ React33__namespace.createElement("span", { className: "uii:-mt-2 uii:inline-flex uii:px-1 uii:py-0.5 uii:bg-red-100 uii:text-red-600 uii:rounded-sm uii:text-[10px] uii:font-medium" }, "Required")), /* @__PURE__ */ React33__namespace.createElement("div", { className: "uii:mt-0.5" }, /* @__PURE__ */ React33__namespace.createElement(
+  ), showError && /* @__PURE__ */ React33__namespace.createElement("span", { className: "uii:-mt-2 uii:inline-flex uii:px-1 uii:py-0.5 uii:bg-red-100 uii:text-red-600 uii:rounded-sm uii:text-[10px] uii:font-medium" }, "Required"), showCaseSensitivity && onCaseSensitiveChange && /* @__PURE__ */ React33__namespace.createElement(
+    "button",
+    {
+      type: "button",
+      title: caseSensitive ? "Case sensitive (click to ignore case)" : "Ignore case (click for case sensitive)",
+      onClick: () => onCaseSensitiveChange(!caseSensitive),
+      className: cn(
+        "uii:-mt-2 uii:inline-flex uii:items-center uii:justify-center uii:rounded-sm uii:border uii:px-1 uii:py-0.5 uii:text-[10px] uii:font-medium uii:transition-colors uii:outline-none focus:uii:ring-2 focus:uii:ring-ring focus:uii:ring-offset-1",
+        caseSensitive ? "uii:bg-primary uii:text-primary-foreground uii:border-primary" : "uii:bg-gray-200 uii:text-muted-foreground uii:border-input hover:uii:bg-gray-300"
+      )
+    },
+    "Aa"
+  )), /* @__PURE__ */ React33__namespace.createElement("div", { className: "uii:mt-0.5" }, /* @__PURE__ */ React33__namespace.createElement(
     "input",
     {
       id: fieldName,
@@ -8822,6 +8837,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 +9278,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 +9292,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;