cynx-lib 1.3.70 → 1.3.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.70",
+  "version": "1.3.71",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/Select.jsx

@@ -44,6 +44,7 @@ export default function Select({
   createLabel,
 }) {
   const [open, setOpen] = useState(false);
+  const [hovered, setHovered] = useState(false);
   const [query, setQuery] = useState('');
   const [pos, setPos] = useState({ top: 0, left: 0, width: 0, openUp: false, maxHeight: 200 });
   const wrapRef = useRef(null);
@@ -218,6 +219,8 @@ export default function Select({
     >
       <div
         onClick={handleOpen}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
         style={{
           width: '100%',
           boxSizing: 'border-box',
@@ -228,7 +231,7 @@ export default function Select({
           padding: paddingVal,
           height: heightVal,
           background: 'var(--sf,var(--surface, #ffffff))',
-          border: `1px solid ${open ? 'var(--accent, #f99e2c)' : 'var(--bd2,var(--border, #e2e8f0))'}`,
+          border: `1px solid ${open ? 'var(--accent, #12675D)' : 'var(--bd,var(--border, #d7d8e0))'}`,
           borderRadius: radiusVal,
           cursor: 'pointer',
           fontFamily: 'var(--f,var(--sans,inherit))',
@@ -237,7 +240,7 @@ export default function Select({
           color: 'var(--t,var(--primary-text, #0f172a))',
           outline: 'none',
           transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
-          boxShadow: open ? 'var(--infd, rgba(37,99,235,.1))' : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+          boxShadow: open ? 'var(--pd, rgba(18,103,93,.12)), var(--shadow,0 1px 3px rgba(20,22,41,.1))' : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
         }}
       >
         <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }}>
@@ -375,7 +378,7 @@ export default function Select({
                   padding: s.height <= 26 ? '2px 5px' : s.height <= 28 ? '3px 6px' : '7px 10px',
                   height: s.searchHeight,
                   background: 'var(--sf2,var(--grey-1, #f5f5f8))',
-                  border: '1.5px solid var(--bd2,var(--border, #e2e8f0))',
+                  border: '1px solid var(--bd,var(--border, #d7d8e0))',
                   borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
                   fontFamily: 'var(--f,var(--sans, inherit))',
                   fontSize: `${s.searchFont}px`,

package/vue/components/Select.vue

@@ -106,6 +106,7 @@ const emit = defineEmits<{
 
 const slots = useSlots();
 const open = ref(false);
+const hovered = ref(false);
 const query = ref("");
 const pos = ref({ top: 0, left: 0, width: 0, openUp: false, maxHeight: 200 });
 const wrapRef = ref<HTMLElement | null>(null);
@@ -361,7 +362,7 @@ function handleInputKeyDown(e: KeyboardEvent) {
         padding: `0 ${s.paddingH}px`,
         height: `${s.height}px`,
         background: 'var(--sf,var(--surface, #ffffff))',
-        border: `1px solid ${open ? 'var(--accent, #f99e2c)' : 'var(--bd2,var(--border, #e2e8f0))'}`,
+        border: `1px solid ${open ? 'var(--accent, #12675D)' : 'var(--bd,var(--border, #d7d8e0))'}`,
         borderRadius: radiusVal,
         cursor: 'pointer',
         fontFamily: 'var(--f,var(--sans,inherit))',
@@ -371,9 +372,11 @@ function handleInputKeyDown(e: KeyboardEvent) {
         outline: 'none',
         transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
         boxShadow: open
-          ? 'var(--infd, rgba(37,99,235,.1))'
+          ? 'var(--pd, rgba(18,103,93,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
           : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
       }"
+      @mouseenter="hovered = true"
+      @mouseleave="hovered = false"
       @click="handleOpen"
     >
       <slot v-if="slots.prefix" name="prefix" />
@@ -555,7 +558,7 @@ function handleInputKeyDown(e: KeyboardEvent) {
               padding: s.height <= 26 ? '2px 5px' : s.height <= 28 ? '3px 6px' : '7px 10px',
               height: `${s.searchHeight}px`,
               background: 'var(--sf2,var(--grey-1, #f5f5f8))',
-              border: '1.5px solid var(--bd2,var(--border, #e2e8f0))',
+              border: '1px solid var(--bd,var(--border, #d7d8e0))',
               borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
               fontFamily: 'var(--f,var(--sans, inherit))',
               fontSize: `${s.searchFont}px`,