lupine.components 1.1.51 → 1.1.53

package/src/component-pool/range/range.tsx

@@ -18,8 +18,12 @@ export type RangeProps = {
   tickStep?: number;
   vertical?: boolean;
   range?: boolean;
+  snapThresholdPercent?: number; // threshold in % to snap to tick, <=0 disables snapping (default 5%)
   onChange?: (val: number | [number, number]) => void;
   hook?: RangeHookProps;
+  trackColor?: string;
+  fillColor?: string;
+  showButtons?: boolean;
 };
 
 // 1. Define Static CSS completely decoupled from Reactivity (isVertical)
@@ -35,7 +39,6 @@ const rangeCss: CssProps = {
     padding: 'var(--space-m, 8px) 0',
     width: '100%',
     height: 'auto',
-    minWidth: '100%',
     minHeight: '40px',
   },
   '&.vertical': {
@@ -61,15 +64,17 @@ const rangeCss: CssProps = {
   '&.horizontal .&-wrapper': {
     width: '100%',
     height: '20px',
+    flex: 1,
   },
   '&.vertical .&-wrapper': {
     width: '20px',
     height: '100%',
+    flex: 1,
   },
 
   '.&-track': {
     position: 'relative',
-    backgroundColor: 'var(--secondary-bg-color, #eee)',
+    backgroundColor: 'var(--range-track-color, var(--scrollbar-bg, #eee))',
     borderRadius: '999px',
   },
   '&.horizontal .&-track': {
@@ -83,7 +88,7 @@ const rangeCss: CssProps = {
 
   '.&-fill': {
     position: 'absolute',
-    backgroundColor: 'var(--primary-accent-color, #0a74c9)',
+    backgroundColor: 'var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
     borderRadius: '999px',
   },
   '&.horizontal .&-fill': {
@@ -132,7 +137,7 @@ const rangeCss: CssProps = {
     width: '20px',
     height: '20px',
     backgroundColor: '#fff',
-    border: '2px solid var(--primary-accent-color, #0a74c9)',
+    border: '2px solid var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
     borderRadius: '50%',
     cursor: 'pointer',
     boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
@@ -149,7 +154,7 @@ const rangeCss: CssProps = {
     width: '20px',
     height: '20px',
     backgroundColor: '#fff',
-    border: '2px solid var(--primary-accent-color, #0a74c9)',
+    border: '2px solid var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
     borderRadius: '50%',
     cursor: 'pointer',
     boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
@@ -158,30 +163,24 @@ const rangeCss: CssProps = {
 
   '.&-ticks': {
     position: 'absolute',
-    display: 'flex',
-    justifyContent: 'space-between',
     pointerEvents: 'none',
     fontSize: '12px',
     color: 'var(--secondary-color, #818181)',
   },
   '&.horizontal .&-ticks': {
-    top: '50%',
+    top: 'calc(50% + 4px)',
     bottom: 'auto',
     left: 0,
     right: 0,
-    marginTop: '4px',
-    marginLeft: '4px',
-    flexDirection: 'row',
+    marginTop: 0,
     height: 'auto',
   },
   '&.vertical .&-ticks': {
     top: 0,
     bottom: 0,
-    left: '20%',
+    left: 'calc(50% + 4px)',
     right: 'auto',
-    marginLeft: '8px',
-    marginTop: 0,
-    flexDirection: 'column-reverse',
+    marginLeft: 0,
     height: '100%',
   },
 
@@ -211,6 +210,64 @@ const rangeCss: CssProps = {
     marginBottom: 0,
     marginRight: '4px',
   },
+
+  '.&-inner-container': {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+  },
+  '&.horizontal .&-inner-container': {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  '&.vertical .&-inner-container': {
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+
+  '&.horizontal .&-buttons': {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: '6px',
+    marginLeft: '10px',
+  },
+  '&.vertical .&-buttons': {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '6px',
+    marginTop: '10px',
+  },
+  '.&-btn': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '24px',
+    height: '24px',
+    borderRadius: '50%',
+    border: '2px solid var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
+    backgroundColor: 'var(--secondary-bg-color, #1c1c1c)',
+    color: 'var(--primary-color, #fff)',
+    fontSize: '16px',
+    fontFamily: 'monospace',
+    fontWeight: 'bold',
+    cursor: 'pointer',
+    padding: 0,
+    margin: 0,
+    userSelect: 'none',
+    transition: 'background-color 0.2s, transform 0.1s',
+    lineHeight: '1',
+    pointerEvents: 'auto',
+  },
+  '.&-btn:hover': {
+    backgroundColor: 'var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
+    color: '#fff',
+    transform: 'scale(1.1)',
+  },
+  '.&-btn:active': {
+    transform: 'scale(0.95)',
+  },
 };
 
 export const Range = (props: RangeProps) => {
@@ -220,6 +277,10 @@ export const Range = (props: RangeProps) => {
   const isRangeMode = !!props.range;
   const isVertical = !!props.vertical;
 
+  const customStyle: any = { ...props.style };
+  if (props.trackColor) customStyle['--range-track-color'] = props.trackColor;
+  if (props.fillColor) customStyle['--range-fill-color'] = props.fillColor;
+
   // Evaluate the immutable hash exact ONCE for all range implementations.
   const globalCssId = getGlobalStylesId(rangeCss);
   // Bind the global style ID ensuring it's in the CSS tree across instances
@@ -247,6 +308,25 @@ export const Range = (props: RangeProps) => {
   let currentVal1 = val1;
   let currentVal2 = val2;
 
+  const adjustByStep = (direction: -1 | 1) => {
+    if (props.disabled) return;
+    if (isRangeMode) {
+      let newVal = currentVal1 + direction * step;
+      newVal = Math.max(min, Math.min(currentVal2, newVal));
+      currentVal1 = newVal;
+      const inputMin = ref.$('.input-min') as HTMLInputElement;
+      if (inputMin) inputMin.value = currentVal1.toString();
+    } else {
+      let newVal = currentVal1 + direction * step;
+      newVal = Math.max(min, Math.min(max, newVal));
+      currentVal1 = newVal;
+      const inputSingle = ref.$('.input-single') as HTMLInputElement;
+      if (inputSingle) inputSingle.value = currentVal1.toString();
+    }
+    updateVisuals();
+    handleChange();
+  };
+
   const updateVisuals = () => {
     const fill = ref.$('.&-fill') as HTMLElement;
     if (!fill) return;
@@ -276,8 +356,124 @@ export const Range = (props: RangeProps) => {
     }
   };
 
+  let snapThresholdPercent = props.snapThresholdPercent;
+  if (snapThresholdPercent === undefined) {
+    const tStep = props.tickStep || max - min;
+    const tStepPercent = (tStep / (max - min)) * 100;
+    snapThresholdPercent = Math.min(5, tStepPercent * 0.1);
+  }
+
+  let animRef = 0;
+  const animateToValue = (targetVal: number) => {
+    cancelAnimationFrame(animRef);
+
+    let isThumb2 = false;
+    let startVal = currentVal1;
+    if (isRangeMode) {
+      if (Math.abs(targetVal - currentVal2) < Math.abs(targetVal - currentVal1)) {
+        isThumb2 = true;
+        startVal = currentVal2;
+      }
+    }
+
+    const startTime = performance.now();
+    const duration = 200; // 200ms animation
+
+    const stepAnim = (time: number) => {
+      const elapsed = time - startTime;
+      let progress = elapsed / duration;
+      if (progress > 1) progress = 1;
+
+      // easeOutQuad
+      const eased = progress * (2 - progress);
+      const current = startVal + (targetVal - startVal) * eased;
+
+      if (isRangeMode) {
+        if (isThumb2) {
+          currentVal2 = current;
+          const inputMax = ref.$('.input-max') as HTMLInputElement;
+          if (inputMax) inputMax.value = currentVal2.toString();
+        } else {
+          currentVal1 = current;
+          const inputMin = ref.$('.input-min') as HTMLInputElement;
+          if (inputMin) inputMin.value = currentVal1.toString();
+        }
+      } else {
+        currentVal1 = current;
+        const inputSingle = ref.$('.input-single') as HTMLInputElement;
+        if (inputSingle) inputSingle.value = currentVal1.toString();
+      }
+
+      updateVisuals();
+
+      if (progress < 1) {
+        animRef = requestAnimationFrame(stepAnim);
+      } else {
+        handleChange();
+      }
+    };
+
+    animRef = requestAnimationFrame(stepAnim);
+  };
+
+  const handleContainerClick = (e: any) => {
+    if (props.disabled) return;
+    if (e.target && e.target.tagName === 'INPUT') return;
+
+    const wrapper = ref.$('.&-wrapper') as HTMLElement;
+    if (!wrapper) return;
+    const rect = wrapper.getBoundingClientRect();
+
+    let clientX = e.clientX;
+    let clientY = e.clientY;
+    if (e.type === 'touchstart') {
+      const touch = (e as unknown as TouchEvent).touches[0];
+      if (touch) {
+        clientX = touch.clientX;
+        clientY = touch.clientY;
+      }
+    }
+
+    let percent = 0;
+    if (isVertical) {
+      const y = clientY - rect.top;
+      percent = 1 - y / rect.height;
+    } else {
+      const x = clientX - rect.left;
+      percent = x / rect.width;
+    }
+    percent = Math.max(0, Math.min(1, percent));
+
+    let targetVal = min + (max - min) * percent;
+    targetVal = Math.round((targetVal - min) / step) * step + min;
+
+    if (snapThresholdPercent > 0 && (props.showTicks || props.showTickLabels)) {
+      const tStep = props.tickStep || max - min;
+      const nearestTick = Math.round((targetVal - min) / tStep) * tStep + min;
+      const threshold = (max - min) * (snapThresholdPercent / 100);
+      if (Math.abs(targetVal - nearestTick) <= threshold) {
+        targetVal = nearestTick;
+      }
+    }
+
+    targetVal = Math.max(min, Math.min(max, targetVal));
+    animateToValue(targetVal);
+  };
+
   const handleInput = (e: Event, isThumb2: boolean) => {
-    const val = parseFloat((e.target as HTMLInputElement).value);
+    let val = parseFloat((e.target as HTMLInputElement).value);
+
+    // Magnetic snapping
+    if (snapThresholdPercent > 0 && (props.showTicks || props.showTickLabels)) {
+      const tStep = props.tickStep || max - min;
+      const nearestTick = Math.round((val - min) / tStep) * tStep + min;
+      const threshold = (max - min) * (snapThresholdPercent / 100);
+      if (Math.abs(val - nearestTick) <= threshold) {
+        val = nearestTick;
+        (e.target as HTMLInputElement).value = val.toString();
+      }
+    }
+
     if (isRangeMode) {
       if (isThumb2) {
         currentVal2 = Math.max(val, currentVal1);
@@ -296,6 +492,7 @@ export const Range = (props: RangeProps) => {
       currentVal1 = val;
     }
     updateVisuals();
+    handleChange(); // Ensure parent receives continuous updates during drag
   };
 
   const handleChange = () => {
@@ -328,7 +525,7 @@ export const Range = (props: RangeProps) => {
   }
 
   const ref: RefProps & { onUnload?: (el: Element) => Promise<void> | void } = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       if (isVertical) {
         const wrapper = ref.$('.&-wrapper') as HTMLElement;
@@ -366,22 +563,49 @@ export const Range = (props: RangeProps) => {
 
   return (
     <div
-      class={['&-container', props.class, props.disabled ? 'disabled' : '', isVertical ? 'vertical' : 'horizontal']
+      class={[globalCssId, '&-container', props.class, props.disabled ? 'disabled' : '', isVertical ? 'vertical' : 'horizontal']
         .join(' ')
         .trim()}
       ref={ref}
-      css={props.style}
+      css={customStyle}
+      onPointerDown={handleContainerClick}
+      onTouchStart={handleContainerClick}
     >
-      <div class='&-wrapper'>
-        <div class='&-track'>
-          <div class='&-fill'></div>
-        </div>
+      <div class='&-inner-container'>
+        <div class='&-wrapper'>
+          <div class='&-track'>
+            <div class='&-fill'></div>
+          </div>
 
-        {isRangeMode ? (
-          <>
+          {isRangeMode ? (
+            <>
+              <input
+                type='range'
+                class='&-input input-min'
+                min={min}
+                max={max}
+                step={step}
+                value={val1}
+                onInput={(e) => handleInput(e, false)}
+                onChange={handleChange}
+                disabled={props.disabled}
+              />
+              <input
+                type='range'
+                class='&-input input-max'
+                min={min}
+                max={max}
+                step={step}
+                value={val2}
+                onInput={(e) => handleInput(e, true)}
+                onChange={handleChange}
+                disabled={props.disabled}
+              />
+            </>
+          ) : (
             <input
               type='range'
-              class='&-input input-min'
+              class='&-input input-single'
               min={min}
               max={max}
               step={step}
@@ -390,43 +614,79 @@ export const Range = (props: RangeProps) => {
               onChange={handleChange}
               disabled={props.disabled}
             />
-            <input
-              type='range'
-              class='&-input input-max'
-              min={min}
-              max={max}
-              step={step}
-              value={val2}
-              onInput={(e) => handleInput(e, true)}
-              onChange={handleChange}
-              disabled={props.disabled}
-            />
-          </>
-        ) : (
-          <input
-            type='range'
-            class='&-input input-single'
-            min={min}
-            max={max}
-            step={step}
-            value={val1}
-            onInput={(e) => handleInput(e, false)}
-            onChange={handleChange}
-            disabled={props.disabled}
-          />
-        )}
-      </div>
+          )}
+
+          {(props.showTicks || props.showTickLabels) && (
+            <div class='&-ticks'>
+              {ticks.map((t) => {
+                const percent = ((t - min) / (max - min)) * 100;
+                const offsetPx = 10 - (percent / 100) * 20;
+                const style = isVertical
+                  ? { position: 'absolute' as any, bottom: `calc(${percent}% + ${offsetPx}px)`, transform: 'translateY(50%)' }
+                  : { position: 'absolute' as any, left: `calc(${percent}% + ${offsetPx}px)`, top: '0', transform: 'translateX(-50%)' };
 
-      {(props.showTicks || props.showTickLabels) && (
-        <div class='&-ticks'>
-          {ticks.map((t) => (
-            <div class='&-tick'>
-              {props.showTicks && <div class='&-tick-mark'></div>}
-              {props.showTickLabels && <span>{t}</span>}
+                return (
+                  <div class='&-tick' style={style}>
+                    {props.showTicks && <div class='&-tick-mark'></div>}
+                    {props.showTickLabels && (
+                      <span
+                        style={{ pointerEvents: 'auto', cursor: 'pointer' }}
+                        onPointerDown={(e: any) => {
+                          e.stopPropagation();
+                          animateToValue(t);
+                        }}
+                        onTouchStart={(e: any) => {
+                          e.stopPropagation();
+                          animateToValue(t);
+                        }}
+                      >
+                        {t}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
             </div>
-          ))}
+          )}
         </div>
-      )}
+
+        {props.showButtons && (
+          <div class='&-buttons'>
+            <button
+              class='&-btn &-btn-minus'
+              onPointerDown={(e: any) => {
+                e.stopPropagation();
+                adjustByStep(-1);
+              }}
+              onTouchStart={(e: any) => {
+                e.stopPropagation();
+                adjustByStep(-1);
+              }}
+              onClick={(e: any) => {
+                e.stopPropagation();
+              }}
+            >
+              -
+            </button>
+            <button
+              class='&-btn &-btn-plus'
+              onPointerDown={(e: any) => {
+                e.stopPropagation();
+                adjustByStep(1);
+              }}
+              onTouchStart={(e: any) => {
+                e.stopPropagation();
+                adjustByStep(1);
+              }}
+              onClick={(e: any) => {
+                e.stopPropagation();
+              }}
+            >
+              +
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

package/src/component-pool/search-input/search-input.tsx

@@ -69,7 +69,7 @@ export const SearchInput = (props: InputWithClearProps) => {
   bindGlobalStyle(globalCssId, css);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const onSearch = () => {
@@ -97,7 +97,7 @@ export const SearchInput = (props: InputWithClearProps) => {
   }
 
   return (
-    <div ref={ref} class={['search-input', props.class].join(' ').trim()}>
+    <div ref={ref} class={[globalCssId, 'search-input', props.class].join(' ').trim()}>
       <input
         type='text'
         maxLength={30}

package/src/component-pool/skeleton/skeleton-card.tsx

@@ -43,7 +43,7 @@ export const SkeletonCard = (props: SkeletonCardProps) => {
   const contentRef: RefProps = {};
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       const container = ref.current as HTMLElement;
 
@@ -106,7 +106,7 @@ export const SkeletonCard = (props: SkeletonCardProps) => {
 
   // Avatar size is fixed to 48px to represent a typical user profile
   return (
-    <div class={['&-container', props.class].join(' ').trim()} ref={ref} css={mergedStyle} aria-hidden='true'>
+    <div class={[globalCssId, '&-container', props.class].join(' ').trim()} ref={ref} css={mergedStyle} aria-hidden='true'>
       <Skeleton width='48px' height='48px' circle={true} animated={animated} />
       <div class='&-content' ref={contentRef}></div>
     </div>

package/src/component-pool/skeleton/skeleton.tsx

@@ -34,7 +34,7 @@ export const Skeleton = (props: SkeletonProps) => {
   bindGlobalStyle(globalCssId, css);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const isAnimated = props.animated !== false; // defaults to true
@@ -50,7 +50,7 @@ export const Skeleton = (props: SkeletonProps) => {
 
   return (
     <div
-      class={['&-container', isAnimated ? 'is-animated' : '', isCircle ? 'is-circle' : '', props.class]
+      class={[globalCssId, '&-container', isAnimated ? 'is-animated' : '', isCircle ? 'is-circle' : '', props.class]
         .join(' ')
         .trim()}
       ref={ref}

package/src/component-pool/tag-input/tag-input.tsx

@@ -89,7 +89,7 @@ export const TagInput = ({
   bindGlobalStyle(globalCssId, tagInputCss);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   let currentSelection = [...selectedIndices];
@@ -97,7 +97,7 @@ export const TagInput = ({
   const renderTags = () => {
     // pass globalCssId for & in classname
     const tempRef: RefProps = {
-      globalCssId,
+      referToCssId: globalCssId,
     };
     if (currentSelection.length === 0) {
       return (
@@ -158,13 +158,8 @@ export const TagInput = ({
   };
 
   const dom = new HtmlVar(renderTags());
-
-  // Combine native classes, framework namespace (from globalCssId), and optional extra classes
-  let finalClass = cls || '';
-  if (disabled) finalClass += ' disabled';
-
   return (
-    <div ref={ref} css={extraCss} class={finalClass} onClick={openSelector}>
+    <div ref={ref} css={extraCss} class={[globalCssId, cls, disabled ? 'disabled' : ''].filter(Boolean).join(' ')} onClick={openSelector}>
       {dom.node}
     </div>
   );

package/src/component-pool/time-picker/time-picker.tsx

@@ -133,7 +133,7 @@ export const TimePicker = (props: TimePickerProps) => {
   const globalCssId = getGlobalStylesId(timePickerCss);
   bindGlobalStyle(globalCssId, timePickerCss);
 
-  const ref: RefProps = { globalCssId };
+  const ref: RefProps = { referToCssId: globalCssId };
   let currentValue = props.value || '';
 
   const parseValue = (val: string) => {
@@ -189,7 +189,7 @@ export const TimePicker = (props: TimePickerProps) => {
       const seconds = Array.from({ length: 60 }, (_, i) => i);
 
       const panelRef: RefProps = {
-        globalCssId,
+        referToCssId: globalCssId,
         onLoad: async () => {
           setTimeout(highlightSelection, 10);
         },
@@ -285,7 +285,7 @@ export const TimePicker = (props: TimePickerProps) => {
   };
 
   return (
-    <div class='&-container' css={props.style} ref={ref}>
+    <div class={[globalCssId, '&-container'].join(' ')} css={props.style} ref={ref}>
       <input
         class={['&-input', props.className || 'input-base'].join(' ')}
         placeholder={props.placeholder || 'Select time'}

package/src/component-pool/timeline/timeline.tsx

@@ -96,7 +96,7 @@ export const Timeline = (props: TimelineProps) => {
   bindGlobalStyle(globalCssId, timelineCss);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
   };
 
   const lineColor = props.lineColor || 'var(--secondary-border-color, #ccc)';
@@ -108,7 +108,7 @@ export const Timeline = (props: TimelineProps) => {
   };
 
   return (
-    <div class={['&-container', props.class].join(' ').trim()} ref={ref} css={containerStyle}>
+    <div class={[globalCssId, '&-container', props.class].join(' ').trim()} ref={ref} css={containerStyle}>
       <div class='&-line' style={{ backgroundColor: lineColor }}></div>
 
       {(props.items || []).map((item, index) => {

package/src/component-pool/tooltip/tooltip.tsx

@@ -222,14 +222,14 @@ const TooltipContent = (props: {
   bindGlobalStyle(globalCssId, tooltipCss);
 
   const ref: RefProps = {
-    globalCssId,
+    referToCssId: globalCssId,
     onLoad: async () => {
       props.onRef(ref);
     },
   };
 
   return (
-    <div class={['&-container', props.position].join(' ')} ref={ref}>
+    <div class={[globalCssId, '&-container', props.position].join(' ')} ref={ref}>
       <div class='&-box'>
         {props.content}
         {props.showArrow && <div class='&-arrow' />}

package/src/components/meta-data.tsx

@@ -1,6 +1,5 @@
 // import { bindPageResetEvent } from '../core/page-reset-events';
-import { addMetaDataTags } from 'lupine.web';
-import { encodeHtml } from '../lib';
+import { addMetaDataTags, encodeHtml } from 'lupine.web';
 type NameMeta = { name: string; content: string };
 type PropertyMeta = { property: string; content: string };
 type HttpEquivMeta = { httpEquiv: string; content: string };

package/src/components/meta-description.tsx

@@ -1,7 +1,6 @@
 // import { bindPageResetEvent } from '../core/page-reset-events';
 
-import { addMetaDataTags } from 'lupine.web';
-import { encodeHtml } from '../lib';
+import { addMetaDataTags, encodeHtml } from 'lupine.web';
 
 export const MetaDescription = ({ children }: { children: string }) => {
   addMetaDataTags('name:description', `<meta name="description" content="${encodeHtml(children)}">`);