@dbcdk/react-components 0.0.167 → 0.0.168

package/dist/components/filter-field/FilterField.cjs

@@ -2,7 +2,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
 var react = require('react');
 var Input = require('../../components/forms/input/Input');
 var Typeahead = require('../../components/forms/typeahead/Typeahead');
@@ -69,7 +68,8 @@ function OperatorDropdown({
     Popover.Popover,
     {
       ref: popRef,
-      minWidth: "160px",
+      minWidth: "140px",
+      matchTriggerWidth: false,
       trigger: (toggle, icon) => /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -86,10 +86,7 @@ function OperatorDropdown({
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: operators.map((op) => {
         const selected = op === value;
-        return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: selected, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => handleSelect(op), disabled, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: selected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16 }) : null }),
-          LABELS[op]
-        ] }) }, op);
+        return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: selected, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => handleSelect(op), disabled, children: LABELS[op] }) }, op);
       }) })
     }
   );

package/dist/components/filter-field/FilterField.js

@@ -1,6 +1,5 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Check } from 'lucide-react';
 import { useRef, useMemo, useState, useEffect } from 'react';
 import { Input } from '../../components/forms/input/Input';
 import { Typeahead } from '../../components/forms/typeahead/Typeahead';
@@ -63,7 +62,8 @@ function OperatorDropdown({
     Popover,
     {
       ref: popRef,
-      minWidth: "160px",
+      minWidth: "140px",
+      matchTriggerWidth: false,
       trigger: (toggle, icon) => /* @__PURE__ */ jsxs(
         "button",
         {
@@ -80,10 +80,7 @@ function OperatorDropdown({
       ),
       children: /* @__PURE__ */ jsx(Menu, { children: operators.map((op) => {
         const selected = op === value;
-        return /* @__PURE__ */ jsx(Menu.Item, { active: selected, children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => handleSelect(op), disabled, children: [
-          /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: selected ? /* @__PURE__ */ jsx(Check, { size: 16 }) : null }),
-          LABELS[op]
-        ] }) }, op);
+        return /* @__PURE__ */ jsx(Menu.Item, { active: selected, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => handleSelect(op), disabled, children: LABELS[op] }) }, op);
       }) })
     }
   );

package/dist/components/filter-field/FilterField.module.css

@@ -25,7 +25,6 @@
   background: var(--color-bg-surface);
   border-color: var(--color-border-subtle);
   box-shadow: var(--shadow-xs);
-  --filter-operator-bg: var(--color-bg-surface);
 }
 
 .filterField.surface:hover {
@@ -37,14 +36,12 @@
   background: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
   border-color: var(--color-border-selected);
   box-shadow: var(--shadow-sm);
-  --filter-operator-bg: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
 }
 
 .filterField.outlined {
   background: var(--color-bg-surface);
   border-color: var(--color-border-subtle);
   box-shadow: none;
-  --filter-operator-bg: var(--color-bg-surface);
 }
 
 .filterField.outlined:hover {
@@ -55,34 +52,22 @@
   background: color-mix(in srgb, var(--color-bg-selected) 38%, var(--color-bg-surface));
   border-color: var(--color-border-selected);
   box-shadow: none;
-  --filter-operator-bg: color-mix(in srgb, var(--color-bg-selected) 38%, var(--color-bg-surface));
 }
 
 .filterField.subtle {
   background: var(--color-bg-toolbar);
   border-color: transparent;
   box-shadow: inset 0 0 0 1px transparent;
-  --filter-operator-bg: color-mix(in srgb, var(--color-fg-default) 4%, var(--color-bg-toolbar));
 }
 
 .filterField.subtle:hover {
   background: var(--color-bg-surface-strong);
-  --filter-operator-bg: color-mix(
-    in srgb,
-    var(--color-fg-default) 6%,
-    var(--color-bg-surface-strong)
-  );
 }
 
 .filterField.subtle.active {
   background: color-mix(in srgb, var(--color-bg-selected) 55%, var(--color-bg-surface-strong));
   border-color: var(--color-border-selected);
   box-shadow: inset 0 0 0 1px transparent;
-  --filter-operator-bg: color-mix(
-    in srgb,
-    var(--color-bg-selected) 55%,
-    var(--color-bg-surface-strong)
-  );
 }
 
 .filterField.active .label {
@@ -145,10 +130,10 @@
   display: inline-flex;
   align-items: center;
   padding-block: var(--spacing-2xs);
-  padding-inline: var(--spacing-xs);
-  padding-inline-end: var(--spacing-xxs);
+  padding-inline: var(--spacing-xs) 0;
   font-size: var(--font-size-sm);
-  color: var(--color-fg-subtle);
+  color: var(--color-fg-default);
+  font-weight: 500;
   white-space: nowrap;
   user-select: none;
 }
@@ -171,8 +156,8 @@
   gap: var(--spacing-xxs);
   height: 100%;
   padding-block: var(--spacing-2xs);
-  padding-inline: var(--spacing-xxs);
-  color: var(--color-fg-default);
+  padding-inline: var(--spacing-xs) var(--spacing-sm);
+  color: var(--color-fg-muted);
   background: transparent;
   border: 0;
   cursor: pointer;
@@ -187,47 +172,10 @@
   white-space: nowrap;
 }
 
-.filterField .operatorTrigger::after {
-  content: '';
-  position: absolute;
-  inset: 1px 0;
-  background: var(--filter-operator-bg, transparent);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.filterField .operatorTrigger > * {
-  position: relative;
-  z-index: 1;
-}
-
 .filterField .operatorTrigger:hover:not(:disabled) {
   color: var(--color-fg-default);
 }
 
-.filterField .operatorTrigger:hover:not(:disabled)::after {
-  background: color-mix(
-    in srgb,
-    var(--color-fg-default) 8%,
-    var(--filter-operator-bg, transparent)
-  );
-}
-
-/* =========================
-   SEPARATORS
-   ========================= */
-
-.filterField .operatorTrigger::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  top: 8px;
-  bottom: 8px;
-  width: 1px;
-  background: var(--color-border-subtle);
-  pointer-events: none;
-}
-
 /* =========================
    DISABLED
    ========================= */
@@ -240,21 +188,16 @@
 
 .filterField.surface .operatorTrigger:disabled,
 .filterField.outlined .operatorTrigger:disabled {
-  --filter-operator-bg: var(--color-disabled-bg);
 }
 
 .filterField.subtle .operatorTrigger:disabled {
-  --filter-operator-bg: color-mix(
-    in srgb,
-    var(--color-fg-default) 3%,
-    var(--color-bg-surface-subtle)
-  );
 }
 
 .operatorTrigger svg {
   height: var(--component-size-xxs);
   width: var(--component-size-xxs);
   flex: 0 0 auto;
+  color: currentColor;
 }
 
 /* =========================
@@ -269,6 +212,7 @@
   flex: 1 1 auto;
   min-width: 0;
   position: relative;
+  padding-inline-start: 0;
 }
 
 /* Base child sizing */
@@ -365,8 +309,9 @@
 
 .filterField .operatorText {
   white-space: nowrap;
-  font-family: var(--font-family-mono);
+  font-family: var(--font-family);
   font-size: var(--font-size-xs);
+  color: currentColor;
 }
 
 .filterField input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.167",
+  "version": "0.0.168",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",