pxd 0.0.60 → 0.0.62

package/dist/styles/tw.css

@@ -4,16 +4,16 @@
   --background-100-value: 0, 0%, 100%;
   --background-200-value: 0, 0%, 97%;
 
-  --color-gray-alpha-100-value: hsla(0, 0%, 0%, 0.05);
-  --color-gray-alpha-200-value: hsla(0, 0%, 0%, 0.082);
-  --color-gray-alpha-300-value: hsla(0, 0%, 0%, 0.12);
-  --color-gray-alpha-400-value: hsla(0, 0%, 0%, 0.17);
-  --color-gray-alpha-500-value: hsla(0, 0%, 0%, 0.21);
-  --color-gray-alpha-600-value: hsla(0, 0%, 0%, 0.34);
-  --color-gray-alpha-700-value: hsla(0, 0%, 0%, 0.44);
-  --color-gray-alpha-800-value: hsla(0, 0%, 0%, 0.51);
-  --color-gray-alpha-900-value: hsla(0, 0%, 0%, 0.61);
-  --color-gray-alpha-1000-value: hsla(0, 0%, 0%, 0.91);
+  --color-gray-alpha-100-value: #0000000d;
+  --color-gray-alpha-200-value: #00000015;
+  --color-gray-alpha-300-value: #0000001f;
+  --color-gray-alpha-400-value: #0000002b;
+  --color-gray-alpha-500-value: #00000036;
+  --color-gray-alpha-600-value: #00000057;
+  --color-gray-alpha-700-value: #00000070;
+  --color-gray-alpha-800-value: #00000082;
+  --color-gray-alpha-900-value: #0000009c;
+  --color-gray-alpha-1000-value: #000000e8;
 
   --color-gray-100-value: 0, 0%, 95%;
   --color-gray-200-value: 0, 0%, 93%;
@@ -23,7 +23,7 @@
   --color-gray-600-value: 0, 0%, 66%;
   --color-gray-700-value: 0, 0%, 56%;
   --color-gray-800-value: 0, 0%, 49%;
-  --color-gray-900-value: 0, 0%, 40%;
+  --color-gray-900-value: 0, 0%, 30%;
   --color-gray-1000-value: 0, 0%, 9%;
 
   --color-blue-100-value: 212, 100%, 97%;
@@ -108,29 +108,42 @@
   --primary-active: hsla(var(--primary), 90%);
 
   --radius: 0.5rem;
-  --duration: 0.15s;
+  --duration: 0.2s;
   --timing-function: ease-out;
   --ring: var(--primary);
 
-  --shadow-border-default-value: 0 0 0 1px rgba(0, 0, 0, 0.08);
-  --shadow-border-small-value: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-  --shadow-border-medium-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.04),
-    0px 8px 8px -8px rgba(0, 0, 0, 0.04);
-  --shadow-border-large-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.04),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04);
-  --shadow-border-tooltip-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px rgba(0, 0, 0, 0.04);
-  --shadow-border-menu-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06);
-  --shadow-border-modal-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
-  --shadow-border-fullscreen-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
+  --shadow-background-border: 0 0 0 1px hsl(var(--background-200-value));
+  --shadow-border-value: 0 0 0 1px #00000014;
+  --shadow-small-value: 0px 2px 2px #0000000a;
+  --shadow-medium-value: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a;
+  --shadow-large-value: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
+  --shadow-tooltip-value: 0px 1px 1px #00000005, 0px 4px 8px #0000000a;
+  --shadow-menu-value:
+    0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
+  --shadow-modal-value:
+    0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
+  --shadow-fullscreen-value:
+    0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
+
+  /* component variables defaults */
+  --pxd-initial-index: 10;
+  --active-graph-item-radius: 0.125rem;
+  --avatar-size: 2rem;
+  --chip-size: 0.75rem;
+  --fader-size: 1rem;
+  --fader-color: var(--color-gray-100);
+  --hold-button-durations: 2000ms;
+  --hold-button-progress-color: var(--color-gray-alpha-600);
+  --popover-arrow-color: var(--color-gray-1000);
+  --popover-offset: 8;
+  --popover-scale: 0.95;
+  --popover-index: max(var(--pxd-initial-index), 10);
+  --overlay-index: calc(var(--popover-index) - 5);
+  --modal-index: calc(var(--overlay-index) + 5);
+  --modal-width: 33.75rem;
+  --placeholder-gap: 0.75rem;
+  --toggle-active-color: var(--color-primary);
+  --toggle-inactive-color: var(--color-gray-alpha-100);
 
   -webkit-tap-highlight-color: transparent;
   text-rendering: optimizeLegibility;
@@ -150,16 +163,16 @@
   --background-100-value: 0, 0%, 5%;
   --background-200-value: 0, 0%, 0%;
 
-  --color-gray-alpha-100-value: hsla(0, 0%, 100%, 0.06);
-  --color-gray-alpha-200-value: hsla(0, 0%, 100%, 0.09);
-  --color-gray-alpha-300-value: hsla(0, 0%, 100%, 0.13);
-  --color-gray-alpha-400-value: hsla(0, 0%, 100%, 0.14);
-  --color-gray-alpha-500-value: hsla(0, 0%, 100%, 0.24);
-  --color-gray-alpha-600-value: hsla(0, 0%, 100%, 0.51);
-  --color-gray-alpha-700-value: hsla(0, 0%, 100%, 0.54);
-  --color-gray-alpha-800-value: hsla(0, 0%, 100%, 0.47);
-  --color-gray-alpha-900-value: hsla(0, 0%, 100%, 0.61);
-  --color-gray-alpha-1000-value: hsla(0, 0%, 100%, 0.92);
+  --color-gray-alpha-100-value: #ffffff0f;
+  --color-gray-alpha-200-value: #ffffff17;
+  --color-gray-alpha-300-value: #ffffff21;
+  --color-gray-alpha-400-value: #ffffff24;
+  --color-gray-alpha-500-value: #ffffff3d;
+  --color-gray-alpha-600-value: #ffffff82;
+  --color-gray-alpha-700-value: #ffffff8a;
+  --color-gray-alpha-800-value: #ffffff78;
+  --color-gray-alpha-900-value: #ffffff9c;
+  --color-gray-alpha-1000-value: #ffffffeb;
 
   --color-gray-100-value: 0, 0%, 10%;
   --color-gray-200-value: 0, 0%, 12%;
@@ -249,27 +262,17 @@
   --color-pink-900-value: 341, 90%, 67%;
   --color-pink-1000-value: 333, 90%, 96%;
 
-  --shadow-border-default-value: 0 0 0 1px rgba(255, 255, 255, 0.145);
-  --shadow-border-small-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-  --shadow-border-medium-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 2px 2px rgba(0, 0, 0, 0.32),
-    0px 8px 8px -8px rgba(0, 0, 0, 0.16);
-  --shadow-border-large-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 2px 2px rgba(0, 0, 0, 0.04),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04);
-  --shadow-border-tooltip-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 4px 8px rgba(0, 0, 0, 0.04);
-  --shadow-border-menu-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06);
-  --shadow-border-modal-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
-  --shadow-border-fullscreen-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
+  --shadow-border-value: 0 0 0 1px #ffffff25;
+  --shadow-small-value: 0px 1px 2px #00000029;
+  --shadow-medium-value: 0px 2px 2px #00000052, 0px 8px 8px -8px #00000029;
+  --shadow-large-value: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
+  --shadow-tooltip-value: 0px 1px 1px #00000005, 0px 4px 8px #0000000a;
+  --shadow-menu-value:
+    0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
+  --shadow-modal-value:
+    0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
+  --shadow-fullscreen-value:
+    0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
 
   color-scheme: dark;
 }
@@ -284,15 +287,14 @@
 
 @theme inline {
   --font-sans:
-    'Inter', 'Inter Fallback', 'Geist', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    'Inter', 'Inter Fallback', 'Geist', Arial, ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
   --color-primary: hsl(var(--primary));
   --color-primary-hover: var(--primary-hover);
   --color-primary-active: var(--primary-active);
 
-  --color-input: var(--color-gray-alpha-300);
-  --color-border: hsl(var(--color-gray-300-value));
+  --color-border: var(--color-gray-alpha-300-value);
   --color-border-hover: hsl(var(--color-gray-500-value));
   --color-border-active: hsl(var(--color-gray-600-value));
 
@@ -301,7 +303,7 @@
   --color-background-100: hsl(var(--background-100-value));
   --color-background-200: hsl(var(--background-200-value));
   --color-background-hover: hsl(var(--color-gray-200-value));
-  --color-background-active: hsl(var(--color-gray-400-value));
+  --color-background-active: hsl(var(--color-gray-300-value));
 
   --color-gray-alpha-100: var(--color-gray-alpha-100-value);
   --color-gray-alpha-200: var(--color-gray-alpha-200-value);
@@ -404,6 +406,7 @@
 
   --default-transition-duration: var(--duration);
   --default-transition-timing-function: var(--timing-function);
+  --faster-transition-duration: calc(var(--duration) * 0.7);
 
   --z-1: 1;
   --spacing-em: 1em;
@@ -415,17 +418,32 @@
   --radius-xl: calc(var(--radius) + 4px);
   --radius-inherit: inherit;
 
-  --shadow-border-default: var(--shadow-border-default-value);
-  --shadow-border-small: var(--shadow-border-small-value);
-  --shadow-border-medium: var(--shadow-border-medium-value);
-  --shadow-border-large: var(--shadow-border-large-value);
-  --shadow-border-tooltip: var(--shadow-border-tooltip-value);
-  --shadow-border-menu: var(--shadow-border-menu-value);
-  --shadow-border-modal: var(--shadow-border-modal-value);
-  --shadow-border-fullscreen: var(--shadow-border-fullscreen-value);
-
-  --text-13px: 13px;
-  --text-15px: 15px;
+  --shadow-small: var(--shadow-small-value);
+  --shadow-medium: var(--shadow-medium-value);
+  --shadow-large: var(--shadow-large-value);
+  --shadow-tooltip: var(--shadow-tooltip-value);
+  --shadow-menu: var(--shadow-menu-value);
+  --shadow-modal: var(--shadow-modal-value);
+  --shadow-fullscreen: var(--shadow-fullscreen-value);
+
+  --shadow-border-base: var(--shadow-border-value);
+  --shadow-border-small:
+    var(--shadow-border-value), var(--shadow-small-value), var(--shadow-background-border);
+  --shadow-border-medium:
+    var(--shadow-border-value), var(--shadow-medium-value), var(--shadow-background-border);
+  --shadow-border-large:
+    var(--shadow-border-value), var(--shadow-large-value), var(--shadow-background-border);
+  --shadow-border-tooltip:
+    var(--shadow-border-value), var(--shadow-tooltip-value), var(--shadow-background-border);
+  --shadow-border-menu:
+    var(--shadow-border-value), var(--shadow-menu-value), var(--shadow-background-border);
+  --shadow-border-modal:
+    var(--shadow-border-value), var(--shadow-modal-value), var(--shadow-background-border);
+  --shadow-border-fullscreen:
+    var(--shadow-border-value), var(--shadow-fullscreen-value), var(--shadow-background-border);
+
+  --text-13: 13px;
+  --text-15: 15px;
 }
 
 @utility default-animation-duration {
@@ -456,20 +474,30 @@
   }
 }
 
+@utility self-focus-ring {
+  & {
+    outline-offset: 2px;
+  }
+  &:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+  }
+}
+
 @utility peer-focus-ring {
+  & {
+    outline-offset: 2px;
+  }
+
   .peer:focus-visible ~ & {
-    box-shadow:
-      0 0 0 2px var(--color-background-100),
-      0 0 0 4px hsl(var(--ring));
+    outline: 2px solid hsl(var(--ring));
   }
 }
 
-@utility self-focus-ring {
-  &:focus-visible {
-    box-shadow:
-      0 0 0 2px var(--color-background-100),
-      0 0 0 4px hsl(var(--ring));
-  }
+@utility transition-appearance {
+  transition-property:
+    opacity, transform, translate, background-color, box-shadow, font-size, border, color;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
 }
 
 @utility visually-hidden {
@@ -481,7 +509,6 @@
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  visibility: hidden;
   border-width: 0;
   opacity: 0;
 }
@@ -498,39 +525,24 @@
   font-family: inherit;
 }
 
-@utility dvh-* {
-  height: calc(--value(integer) * 1vh);
-
-  @supports (height: 1dvh) {
-    height: calc(--value(integer) * 1dvh);
-  }
-}
-
-@utility max-dvh-* {
-  max-height: calc(--value(integer) * 1vh);
-
-  @supports (height: 1dvh) {
-    max-height: calc(--value(integer) * 1dvh);
-  }
-}
-
 @layer base {
   * {
-    @apply border-border;
+    border-color: var(--color-gray-300);
   }
 }
 
 @layer components {
   .pxd-input--border {
-    border: 1px solid var(--border-color, var(--color-gray-alpha-300));
+    border-width: 1px;
+    border-style: solid;
 
     &:not(.is-disabled, .is-readonly):hover {
-      --border-color: hsla(var(--primary), 0.5);
+      border-color: hsla(var(--primary), 0.5);
     }
 
     &:not(.is-disabled, .is-readonly)[data-focusing='true'],
     &:not(.is-disabled, .is-readonly):focus-within {
-      --border-color: var(--color-primary);
+      border-color: var(--color-primary);
       box-shadow: 0 0 0 3px hsla(var(--primary), 0.2);
     }
 
@@ -542,43 +554,28 @@
       &,
       &:focus-within,
       &[data-focusing='true'] {
-        --border-color: hsl(var(--color-red-900-value));
+        border-color: hsl(var(--color-red-900-value));
         box-shadow: 0 0 0 3px hsl(var(--color-red-300-value));
       }
 
       &:focus-within,
       &[data-focusing='true'],
       &:not(.is-disabled, .is-readonly):hover {
-        --border-color: hsl(var(--color-red-900-value));
+        border-color: hsl(var(--color-red-900-value));
         box-shadow: 0 0 0 3px hsl(var(--color-red-500-value));
       }
     }
   }
 }
 
-.pxd-container-mask::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
-  pointer-events: none;
-  will-change: opacity;
-  z-index: 0;
-}
-
-[class*='pxd-transition--'] {
-  transition-duration: var(--default-transition-duration);
-  transition-timing-function: var(--default-transition-timing-function);
-}
-
 .pxd-transition--fade-enter-active,
 .pxd-transition--fade-leave-active {
   transition-property: opacity;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
   will-change: opacity;
 }
 
-.pxd-container-mask[data-visible='false']::after,
 .pxd-transition--fade-enter-from,
 .pxd-transition--fade-leave-to {
   opacity: 0;
@@ -588,13 +585,21 @@
 .pxd-transition--fade-scale-enter-active,
 .pxd-transition--fade-scale-leave-active {
   transition-property: opacity, transform, filter;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
   will-change: opacity, transform, filter;
 }
 
 .pxd-transition--fade-scale-enter-from,
 .pxd-transition--fade-scale-leave-to {
   opacity: 0;
-  transform: scale(var(--scale, 0.95));
+  filter: blur(5px);
+  transform: scale(0.75);
+}
+
+/* Make exit faster than enter */
+[class*='pxd-transition--'][class*='-leave-active'] {
+  transition-duration: var(--faster-transition-duration) !important;
 }
 
 /*

package/dist/types/shared/props.d.ts

@@ -16,6 +16,7 @@ export type ComponentValue = string | number | boolean
 
 export type ComponentClass = string | any[] | Record<string, any>
 
+export type ComponentAlign = 'left' | 'center' | 'right'
 export type ComponentDirection = 'horizontal' | 'vertical'
 
 export type BasePosition = 'top' | 'bottom' | 'left' | 'right'

package/dist/types/shared/utils.d.ts

@@ -3,10 +3,7 @@ import type { ComponentPublicInstance, MaybeRefOrGetter } from 'vue'
 export type Awaitable<T> = T | PromiseLike<T>
 export type Callback = (...args: any[]) => any
 export type Nullable<T> = T | null | undefined
-export type Numeric = number | `${number}`
-
-// e.g.: 10 | '10' | '10px' | '-10px'
-export type CSSValue = Numeric | CSSUnitValue
+// export type Numeric = number | `${number}`
 
 export type MaybeElement = Nullable<HTMLElement | SVGElement | ComponentPublicInstance>
 export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<Nullable<T>>

package/dist/utils/date.d.ts

@@ -20,7 +20,7 @@ export declare function getAllDatesBetween(startDate: Date | string, endDate: Da
  * @returns 天数、第一天是周几、最后一天是周几
  */
 export declare function getMonthDays(year: number, month: number): {
-    days: any;
-    firstDay: any;
-    lastDay: any;
+    days: number;
+    firstDay: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    lastDay: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 };

package/dist/utils/dom.d.ts

@@ -39,3 +39,4 @@ export interface ScrollbarSize {
 export declare function getScrollbarSize(element?: HTMLElement): ScrollbarSize;
 export declare function getViewportRect(): DOMRect;
 export declare function isOverflowScrollable(ele: Element): boolean;
+export declare function awaitAnimationEnd(element?: Element): Promise<void>;

package/dist/utils/dom.js

@@ -113,3 +113,7 @@ export function isOverflowScrollable(ele) {
   }
   return isOverflowScrollable(parent);
 }
+export async function awaitAnimationEnd(element) {
+  const animations = element?.getAnimations?.() ?? [];
+  await Promise.allSettled(animations.map((a) => a.finished));
+}

package/dist/utils/event.d.ts

@@ -9,5 +9,6 @@ export declare function cachedOff<E extends Event = Event>(el: Nullable<EventTar
 export declare function sleep(ms: number): Promise<unknown>;
 export declare function preventDefaultScroll(ev: Event): boolean;
 export declare function raf(fn: FrameRequestCallback): number;
-export declare function doubleRaf(fn: FrameRequestCallback): void;
+export declare function caf(id: number): void;
+export declare function doubleRaf(fn: FrameRequestCallback): number;
 export {};

package/dist/utils/event.js

@@ -103,6 +103,12 @@ export function preventDefaultScroll(ev) {
 export function raf(fn) {
   return isServer() ? -1 : requestAnimationFrame(fn);
 }
+export function caf(id) {
+  if (isServer()) {
+    return;
+  }
+  cancelAnimationFrame(id);
+}
 export function doubleRaf(fn) {
-  raf(() => raf(fn));
+  return raf(() => raf(fn));
 }

package/dist/utils/format.d.ts

@@ -1,4 +1,4 @@
-import type { CSSValue, Nullable } from '../types/shared/utils';
+import type { Nullable } from '../types/shared/utils';
 /** string -> String */
 export declare function capitalize(text: string): string;
 /** kabab-case -> kababCase */
@@ -12,8 +12,8 @@ export declare function humanize(text: string): string;
 export declare function isTruthyProp(value: unknown): boolean;
 export declare function clampValue(n: number, min: number, max: number): number;
 export declare function isExternalLink(href: string): boolean;
-export declare function toArray(value: unknown | unknown[]): any[];
-export declare function getCssUnitValue(value: Nullable<CSSValue | string>, fallbackValue?: string): string;
+export declare function toArray(value: unknown): any[];
+export declare function getCssUnitValue(value: Nullable<string | number>, fallbackValue?: string): string;
 /**
  * Increase string a value with unit
  *

package/dist/utils/format.js

@@ -1,4 +1,5 @@
-import { FLOATING_REGEX, INTEGER_REGEX } from "./regexp.js";
+const INTEGER_REGEX = /^-?\d+$/;
+const FLOATING_REGEX = /^-?\d+\.?\d*/;
 export function capitalize(text) {
   return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
 }
@@ -47,10 +48,10 @@ export function getCssUnitValue(value, fallbackValue) {
   if (value == null || value === "") {
     return fallbackValue;
   }
-  if (typeof value === "number" || INTEGER_REGEX.test(value)) {
-    return `${value}px`;
+  if (typeof value === "number" || INTEGER_REGEX.test(String(value))) {
+    return `${String(value)}px`;
   }
-  return value;
+  return String(value);
 }
 export function increaseWithUnit(target, delta) {
   if (typeof target === "number") {

package/dist/utils/fuzzy-search.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns whether `text` or `keywords` matches a user-typed `search` query.
+ *
+ * Matching is intentionally order-preserving: this helper is used only to
+ * decide visibility, not ranking.
+ */
+export declare function isMatch(text: string, search: string, keywords?: string[]): boolean;

package/dist/utils/fuzzy-search.js

@@ -0,0 +1,61 @@
+export function isMatch(text, search, keywords) {
+  if (!search) {
+    return true;
+  }
+  const needle = search.toLowerCase().trim();
+  if (!needle) {
+    return true;
+  }
+  if (text && matchesOne(text.toLowerCase(), needle)) {
+    return true;
+  }
+  if (keywords && keywords.length > 0) {
+    for (const kw of keywords) {
+      if (kw && matchesOne(kw.toLowerCase(), needle)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function matchesOne(haystack, needle) {
+  if (!haystack) {
+    return false;
+  }
+  if (haystack === needle) {
+    return true;
+  }
+  if (haystack.startsWith(needle)) {
+    return true;
+  }
+  if (hasWordBoundaryMatch(haystack, needle)) {
+    return true;
+  }
+  if (haystack.includes(needle)) {
+    return true;
+  }
+  return hasFuzzySubsequenceMatch(haystack, needle);
+}
+function hasWordBoundaryMatch(haystack, needle) {
+  let from = 0;
+  while (from <= haystack.length) {
+    const idx = haystack.indexOf(needle, from);
+    if (idx === -1) {
+      return false;
+    }
+    if (idx === 0 || /\W/.test(haystack[idx - 1])) {
+      return true;
+    }
+    from = idx + 1;
+  }
+  return false;
+}
+function hasFuzzySubsequenceMatch(haystack, needle) {
+  let ni = 0;
+  for (let hi = 0; hi < haystack.length && ni < needle.length; hi++) {
+    if (haystack[hi] === needle[ni]) {
+      ni++;
+    }
+  }
+  return ni >= needle.length;
+}

package/dist/utils/get.d.ts

@@ -1,7 +1,9 @@
+import type { ResponsiveValue } from '../types/shared/props';
 import type { Nullable } from '../types/shared/utils';
 export declare function getFallbackValue<Variants extends Record<string, any>>(variant: Nullable<string>, variants: Variants, defaultVariant?: keyof Variants): any;
 export declare function getColorByThreshold(value: number, colors: Record<string, string>): string;
 type DocumentDirection = 'rtl' | 'ltr' | 'auto';
 export declare function getDocumentDirection(): DocumentDirection;
 export declare function getPlatform(): "linux" | "mac" | "windows";
+export declare function getResponsiveValue<V extends string | number>(prop: ResponsiveValue<V> | undefined, xsValue: Nullable<V>, valueSetter: (acc: Record<string, V>, bp: any, v: V) => void): Record<string, V>;
 export {};

package/dist/utils/get.js

@@ -1,3 +1,4 @@
+import { isNil } from "es-toolkit";
 import { isServer } from "./is.js";
 export function getFallbackValue(variant, variants, defaultVariant = "default") {
   return (variant ? variants[variant] : null) ?? variants[defaultVariant];
@@ -13,7 +14,7 @@ export function getColorByThreshold(value, colors) {
       return colors[keys[i - 1]];
     }
   }
-  return colors[keys[keyLength - 1]];
+  return colors[keys.at(-1)];
 }
 export function getDocumentDirection() {
   if (isServer()) {
@@ -39,3 +40,16 @@ export function getPlatform() {
   }
   return "linux";
 }
+export function getResponsiveValue(prop, xsValue, valueSetter) {
+  const formatted = Object.assign(
+    isNil(xsValue) ? {} : { xs: xsValue },
+    typeof prop === "object" ? prop : {}
+  );
+  return Object.entries(formatted).reduce(
+    (acc, [bp, value]) => {
+      valueSetter(acc, bp, value);
+      return acc;
+    },
+    {}
+  );
+}

package/dist/utils/index.d.ts

@@ -1,11 +1,10 @@
-export * from './context';
-export * from './date';
-export * from './debounce';
-export * from './dom';
-export * from './event';
-export * from './format';
-export * from './get';
-export * from './is';
-export * from './regexp';
-export * from './throttle';
-export * from './uid';
+export * from './context.js';
+export * from './date.js';
+export * from './dom.js';
+export * from './event.js';
+export * from './format.js';
+export * from './get.js';
+export * from './is.js';
+export * from './fuzzy-search.js';
+export * from './uid.js';
+export * from './timing.js';

package/dist/utils/index.js

@@ -1,11 +1,10 @@
 export * from "./context.js";
 export * from "./date.js";
-export * from "./debounce.js";
 export * from "./dom.js";
 export * from "./event.js";
 export * from "./format.js";
 export * from "./get.js";
 export * from "./is.js";
-export * from "./regexp.js";
-export * from "./throttle.js";
+export * from "./fuzzy-search.js";
 export * from "./uid.js";
+export * from "./timing.js";