softable-pixels-web 1.1.8 → 1.1.9

package/dist/useFloating--PcINgSt.js

@@ -0,0 +1,295 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+//#region src/hooks/useFloating/constants/fallbackPlacements.ts
+const FALLBACK_PLACEMENTS = {
+	"bottom-start": [
+		"bottom-start",
+		"top-start",
+		"bottom-end",
+		"top-end",
+		"right-start",
+		"left-start"
+	],
+	"bottom-end": [
+		"bottom-end",
+		"top-end",
+		"bottom-start",
+		"top-start",
+		"left-start",
+		"right-start"
+	],
+	bottom: [
+		"bottom",
+		"top",
+		"bottom-start",
+		"bottom-end",
+		"top-start",
+		"top-end"
+	],
+	"top-start": [
+		"top-start",
+		"bottom-start",
+		"top-end",
+		"bottom-end",
+		"right-start",
+		"left-start"
+	],
+	"top-end": [
+		"top-end",
+		"bottom-end",
+		"top-start",
+		"bottom-start",
+		"left-start",
+		"right-start"
+	],
+	top: [
+		"top",
+		"bottom",
+		"top-start",
+		"top-end",
+		"bottom-start",
+		"bottom-end"
+	],
+	"right-start": [
+		"right-start",
+		"left-start",
+		"right-end",
+		"left-end",
+		"bottom-start",
+		"top-start"
+	],
+	"right-end": [
+		"right-end",
+		"left-end",
+		"right-start",
+		"left-start",
+		"bottom-end",
+		"top-end"
+	],
+	right: [
+		"right",
+		"left",
+		"right-start",
+		"right-end",
+		"left-start",
+		"left-end"
+	],
+	"left-start": [
+		"left-start",
+		"right-start",
+		"left-end",
+		"right-end",
+		"bottom-start",
+		"top-start"
+	],
+	"left-end": [
+		"left-end",
+		"right-end",
+		"left-start",
+		"right-start",
+		"bottom-end",
+		"top-end"
+	],
+	left: [
+		"left",
+		"right",
+		"left-start",
+		"left-end",
+		"right-start",
+		"right-end"
+	],
+	center: [
+		"center",
+		"bottom",
+		"top",
+		"right",
+		"left"
+	]
+};
+
+//#endregion
+//#region src/hooks/useFloating/utils/position.ts
+function calcForPlacement({ rect, offsetY, offsetX, placement, floatingRect }) {
+	let top = rect.top + offsetY;
+	let left = rect.left + offsetX;
+	switch (placement) {
+		case "top":
+			top = rect.top - floatingRect.height - offsetY;
+			left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX;
+			break;
+		case "top-start":
+			top = rect.top - floatingRect.height - offsetY;
+			break;
+		case "top-end":
+			top = rect.top - floatingRect.height - offsetY;
+			left = rect.right - offsetX - floatingRect.width;
+			break;
+		case "bottom":
+			top = rect.bottom + offsetY;
+			left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX;
+			break;
+		case "bottom-start":
+			top = rect.bottom + offsetY;
+			break;
+		case "bottom-end":
+			top = rect.bottom + offsetY;
+			left = rect.right - offsetX - floatingRect.width;
+			break;
+		case "left":
+			top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY;
+			left = rect.left - floatingRect.width - offsetX;
+			break;
+		case "left-start":
+			left = rect.left - floatingRect.width - offsetX;
+			break;
+		case "left-end":
+			top = rect.bottom - floatingRect.height - offsetY;
+			left = rect.left - floatingRect.width - offsetX;
+			break;
+		case "right":
+			top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY;
+			left = rect.right + offsetX;
+			break;
+		case "right-start":
+			left = rect.right + offsetX;
+			break;
+		case "right-end":
+			left = rect.right + offsetX;
+			top = rect.bottom - floatingRect.height - offsetY;
+			break;
+		case "center":
+			left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX;
+			top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY;
+			break;
+	}
+	return {
+		top,
+		left
+	};
+}
+function clampToViewport(top, left, floatingRect, margin) {
+	const vw = window.innerWidth;
+	const vh = window.innerHeight;
+	const clampedLeft = Math.min(Math.max(left, margin), vw - floatingRect.width - margin);
+	return {
+		top: Math.min(Math.max(top, margin), vh - floatingRect.height - margin),
+		left: clampedLeft
+	};
+}
+function overflows(top, left, floatingRect, margin) {
+	const vw = window.innerWidth;
+	const vh = window.innerHeight;
+	return {
+		left: left < margin,
+		right: left + floatingRect.width > vw - margin,
+		top: top < margin,
+		bottom: top + floatingRect.height > vh - margin
+	};
+}
+function fallbackPlacements(p) {
+	return FALLBACK_PLACEMENTS[p] ?? [p];
+}
+function getPositionInViewport(params) {
+	const { rect, floatingRect, placement, offsetX = 0, offsetY = 0, margin = 8, tryFlip = true } = params;
+	const tries = tryFlip ? fallbackPlacements(placement) : [placement];
+	for (const p of tries) {
+		const raw$1 = calcForPlacement({
+			rect,
+			floatingRect,
+			placement: p,
+			offsetX,
+			offsetY
+		});
+		const o = overflows(raw$1.top, raw$1.left, floatingRect, margin);
+		if (!o.left && !o.right && !o.top && !o.bottom) return {
+			...raw$1,
+			placement: p
+		};
+	}
+	const raw = calcForPlacement({
+		rect,
+		offsetY,
+		offsetX,
+		placement,
+		floatingRect
+	});
+	return {
+		...clampToViewport(raw.top, raw.left, floatingRect, margin),
+		placement
+	};
+}
+
+//#endregion
+//#region src/hooks/useFloating/index.ts
+function isElement(value) {
+	return value instanceof Element;
+}
+function useFloating(targetRef, options) {
+	const { offsetX = 0, offsetY = 6, strategy = "fixed", scrollContainerId, viewportMargin = 8, keepInViewport = true, placement = "bottom-start" } = options || {};
+	const [floatingEl, setFloatingEl] = useState(null);
+	const update = useCallback(() => {
+		const target = targetRef.current;
+		const floating = floatingEl;
+		if (!target || !floating) return;
+		const pos = getPositionInViewport({
+			rect: target.getBoundingClientRect(),
+			offsetX,
+			offsetY,
+			placement,
+			floatingRect: floating.getBoundingClientRect(),
+			tryFlip: keepInViewport,
+			margin: viewportMargin
+		});
+		floating.style.top = "0px";
+		floating.style.left = "0px";
+		floating.style.position = strategy;
+		floating.style.transform = `translate(${pos.left}px, ${pos.top}px)`;
+	}, [
+		offsetX,
+		offsetY,
+		strategy,
+		floatingEl,
+		placement,
+		targetRef,
+		keepInViewport,
+		viewportMargin
+	]);
+	useEffect(() => {
+		if (!floatingEl) return;
+		const scrollContainer = scrollContainerId ? document.getElementById(scrollContainerId) : window;
+		update();
+		const rafUpdate = () => requestAnimationFrame(update);
+		if (scrollContainer && "addEventListener" in scrollContainer) scrollContainer.addEventListener("scroll", rafUpdate, { passive: true });
+		window.addEventListener("resize", rafUpdate, { passive: true });
+		const ro = new ResizeObserver(rafUpdate);
+		const target = targetRef.current;
+		if (isElement(target)) ro.observe(target);
+		ro.observe(floatingEl);
+		return () => {
+			if (scrollContainer && "removeEventListener" in scrollContainer) scrollContainer.removeEventListener("scroll", rafUpdate);
+			window.removeEventListener("resize", rafUpdate);
+			ro.disconnect();
+		};
+	}, [
+		floatingEl,
+		update,
+		scrollContainerId,
+		targetRef
+	]);
+	const floatingRef = useCallback((el) => {
+		setFloatingEl(el);
+	}, []);
+	return useMemo(() => ({
+		floatingEl,
+		floatingRef,
+		update
+	}), [
+		floatingEl,
+		floatingRef,
+		update
+	]);
+}
+
+//#endregion
+export { useFloating as t };
+//# sourceMappingURL=useFloating--PcINgSt.js.map

package/dist/useFloating--PcINgSt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloating--PcINgSt.js","names":["FALLBACK_PLACEMENTS: Record<Placement, Placement[]>","raw","scrollContainer: Window | HTMLElement | null"],"sources":["../src/hooks/useFloating/constants/fallbackPlacements.ts","../src/hooks/useFloating/utils/position.ts","../src/hooks/useFloating/index.ts"],"sourcesContent":["// Types\nimport type { Placement } from '@hooks/useFloating/types'\n\nexport const FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {\n  'bottom-start': [\n    'bottom-start',\n    'top-start',\n    'bottom-end',\n    'top-end',\n    'right-start',\n    'left-start'\n  ],\n  'bottom-end': [\n    'bottom-end',\n    'top-end',\n    'bottom-start',\n    'top-start',\n    'left-start',\n    'right-start'\n  ],\n  bottom: [\n    'bottom',\n    'top',\n    'bottom-start',\n    'bottom-end',\n    'top-start',\n    'top-end'\n  ],\n  'top-start': [\n    'top-start',\n    'bottom-start',\n    'top-end',\n    'bottom-end',\n    'right-start',\n    'left-start'\n  ],\n  'top-end': [\n    'top-end',\n    'bottom-end',\n    'top-start',\n    'bottom-start',\n    'left-start',\n    'right-start'\n  ],\n  top: ['top', 'bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end'],\n  'right-start': [\n    'right-start',\n    'left-start',\n    'right-end',\n    'left-end',\n    'bottom-start',\n    'top-start'\n  ],\n  'right-end': [\n    'right-end',\n    'left-end',\n    'right-start',\n    'left-start',\n    'bottom-end',\n    'top-end'\n  ],\n  right: [\n    'right',\n    'left',\n    'right-start',\n    'right-end',\n    'left-start',\n    'left-end'\n  ],\n  'left-start': [\n    'left-start',\n    'right-start',\n    'left-end',\n    'right-end',\n    'bottom-start',\n    'top-start'\n  ],\n  'left-end': [\n    'left-end',\n    'right-end',\n    'left-start',\n    'right-start',\n    'bottom-end',\n    'top-end'\n  ],\n  left: ['left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'],\n  center: ['center', 'bottom', 'top', 'right', 'left']\n}\n","// Utils\nimport { FALLBACK_PLACEMENTS } from '../constants/fallbackPlacements'\n\n// Types\nimport type { Placement, PositionResult } from '@hooks/useFloating/types'\n\ntype CalcParams = {\n  rect: DOMRect\n  floatingRect: DOMRect\n  placement: Placement\n  offsetX: number\n  offsetY: number\n}\n\nfunction calcForPlacement({\n  rect,\n  offsetY,\n  offsetX,\n  placement,\n  floatingRect\n}: CalcParams): Omit<PositionResult, 'placement'> {\n  let top = rect.top + offsetY\n  let left = rect.left + offsetX\n\n  switch (placement) {\n    case 'top':\n      top = rect.top - floatingRect.height - offsetY\n      left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX\n      break\n\n    case 'top-start':\n      top = rect.top - floatingRect.height - offsetY\n      break\n\n    case 'top-end':\n      top = rect.top - floatingRect.height - offsetY\n      left = rect.right - offsetX - floatingRect.width\n      break\n\n    case 'bottom':\n      top = rect.bottom + offsetY\n      left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX\n      break\n\n    case 'bottom-start':\n      top = rect.bottom + offsetY\n      break\n\n    case 'bottom-end':\n      top = rect.bottom + offsetY\n      left = rect.right - offsetX - floatingRect.width\n      break\n\n    case 'left':\n      top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY\n      left = rect.left - floatingRect.width - offsetX\n      break\n\n    case 'left-start':\n      left = rect.left - floatingRect.width - offsetX\n      break\n\n    case 'left-end':\n      top = rect.bottom - floatingRect.height - offsetY\n      left = rect.left - floatingRect.width - offsetX\n      break\n\n    case 'right':\n      top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY\n      left = rect.right + offsetX\n      break\n\n    case 'right-start':\n      left = rect.right + offsetX\n      break\n\n    case 'right-end':\n      left = rect.right + offsetX\n      top = rect.bottom - floatingRect.height - offsetY\n      break\n\n    case 'center':\n      left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX\n      top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY\n      break\n  }\n\n  return { top, left }\n}\n\nfunction clampToViewport(\n  top: number,\n  left: number,\n  floatingRect: DOMRect,\n  margin: number\n) {\n  const vw = window.innerWidth\n  const vh = window.innerHeight\n\n  const clampedLeft = Math.min(\n    Math.max(left, margin),\n    vw - floatingRect.width - margin\n  )\n  const clampedTop = Math.min(\n    Math.max(top, margin),\n    vh - floatingRect.height - margin\n  )\n\n  return { top: clampedTop, left: clampedLeft }\n}\n\nfunction overflows(\n  top: number,\n  left: number,\n  floatingRect: DOMRect,\n  margin: number\n) {\n  const vw = window.innerWidth\n  const vh = window.innerHeight\n  return {\n    left: left < margin,\n    right: left + floatingRect.width > vw - margin,\n    top: top < margin,\n    bottom: top + floatingRect.height > vh - margin\n  }\n}\n\nfunction fallbackPlacements(p: Placement): Placement[] {\n  return FALLBACK_PLACEMENTS[p] ?? [p]\n}\n\nexport function getPositionInViewport(params: {\n  rect: DOMRect\n  margin?: number\n  offsetX?: number\n  offsetY?: number\n  tryFlip?: boolean\n  floatingRect: DOMRect\n  placement: Placement\n}): PositionResult {\n  const {\n    rect,\n    floatingRect,\n    placement,\n    offsetX = 0,\n    offsetY = 0,\n    margin = 8,\n    tryFlip = true\n  } = params\n\n  const tries = tryFlip ? fallbackPlacements(placement) : [placement]\n\n  for (const p of tries) {\n    const raw = calcForPlacement({\n      rect,\n      floatingRect,\n      placement: p,\n      offsetX,\n      offsetY\n    })\n    const o = overflows(raw.top, raw.left, floatingRect, margin)\n    if (!o.left && !o.right && !o.top && !o.bottom) {\n      return { ...raw, placement: p }\n    }\n  }\n\n  const raw = calcForPlacement({\n    rect,\n    offsetY,\n    offsetX,\n    placement,\n    floatingRect\n  })\n  const clamped = clampToViewport(raw.top, raw.left, floatingRect, margin)\n  return { ...clamped, placement }\n}\n","// External Libraries\nimport { useMemo, useState, useEffect, useCallback } from 'react'\n\n// Utils\nimport { getPositionInViewport } from '@hooks/useFloating/utils/position'\n\n// Types\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\nexport type AnchorLike = { getBoundingClientRect: () => DOMRect }\ntype Anchor = HTMLElement | AnchorLike\n\nfunction isElement(value: unknown): value is Element {\n  return value instanceof Element\n}\n\nexport function useFloating(\n  targetRef: React.RefObject<Anchor>,\n  options?: FloatingOptions\n) {\n  const {\n    offsetX = 0,\n    offsetY = 6,\n    strategy = 'fixed',\n    scrollContainerId,\n    viewportMargin = 8,\n    keepInViewport = true,\n    placement = 'bottom-start'\n  } = options || {}\n\n  const [floatingEl, setFloatingEl] = useState<HTMLElement | null>(null)\n\n  const update = useCallback(() => {\n    const target = targetRef.current\n    const floating = floatingEl\n    if (!target || !floating) return\n\n    const rect = target.getBoundingClientRect()\n    const floatingRect = floating.getBoundingClientRect()\n\n    const pos = getPositionInViewport({\n      rect,\n      offsetX,\n      offsetY,\n      placement,\n      floatingRect,\n      tryFlip: keepInViewport,\n      margin: viewportMargin\n    })\n\n    floating.style.top = '0px'\n    floating.style.left = '0px'\n    floating.style.position = strategy\n    floating.style.transform = `translate(${pos.left}px, ${pos.top}px)`\n  }, [\n    offsetX,\n    offsetY,\n    strategy,\n    floatingEl,\n    placement,\n    targetRef,\n    keepInViewport,\n    viewportMargin\n  ])\n\n  useEffect(() => {\n    if (!floatingEl) return\n\n    const scrollContainer: Window | HTMLElement | null = scrollContainerId\n      ? document.getElementById(scrollContainerId)\n      : window\n\n    update()\n\n    const rafUpdate = () => requestAnimationFrame(update)\n\n    // scroll (Window ou Element)\n    if (scrollContainer && 'addEventListener' in scrollContainer) {\n      scrollContainer.addEventListener('scroll', rafUpdate, { passive: true })\n    }\n    window.addEventListener('resize', rafUpdate, { passive: true })\n\n    const ro = new ResizeObserver(rafUpdate)\n\n    const target = targetRef.current\n\n    if (isElement(target)) ro.observe(target)\n\n    ro.observe(floatingEl)\n\n    return () => {\n      if (scrollContainer && 'removeEventListener' in scrollContainer) {\n        scrollContainer.removeEventListener('scroll', rafUpdate as any)\n      }\n      window.removeEventListener('resize', rafUpdate)\n      ro.disconnect()\n    }\n  }, [floatingEl, update, scrollContainerId, targetRef])\n\n  const floatingRef = useCallback((el: HTMLElement | null) => {\n    setFloatingEl(el)\n  }, [])\n\n  return useMemo(\n    () => ({ floatingEl, floatingRef, update }),\n    [floatingEl, floatingRef, update]\n  )\n}\n"],"mappings":"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"}

package/dist/{useThemedStyles-B7irjShy.d.ts → useThemedStyles-C6dNoaRC.d.ts}

@@ -56,10 +56,6 @@ type SlotStyle = (React.CSSProperties | CSSVars) & {
  * ```
  */
 type StyleMap = Record<string, SlotStyle>;
-/**
- * Creates a style map from a plain object.
- */
-declare const styled: <T extends Record<string, SlotStyle>>(styles: T) => T;
 /**
  * A function that returns a style map.
  */
@@ -68,6 +64,29 @@ type StylesFactoryAny = (...args: any[]) => StyleMap;
  * A map of partial style maps.
  */
 type TypeStyles<TFactory extends StylesFactoryAny> = Partial<{ [K in keyof ReturnType<TFactory>]: SlotStyle }>;
+/**
+ * Creates a partial version of the return type of a style factory function.
+ *
+ * This utility type is useful for defining style overrides, allowing consumers
+ * to provide only a subset of the styles returned by a given function.
+ *
+ * @template T - A function type that returns a styles object.
+ *
+ * @example
+ * ```ts
+ * const createInputStyles = () => ({
+ *   container: '...',
+ *   input: '...'
+ * });
+ *
+ * type InputStylesOverride = StylesOf<typeof createInputStyles>;
+ * // {
+ * //   container?: string;
+ * //   input?: string;
+ * // }
+ * ```
+ */
+type StylesOf<T extends (...args: any) => any> = Partial<ReturnType<T>>;
 //#endregion
-export { styled as i, StyleMap as n, TypeStyles as r, SlotStyle as t };
-//# sourceMappingURL=useThemedStyles-B7irjShy.d.ts.map
+export { StylesOf as n, TypeStyles as r, SlotStyle as t };
+//# sourceMappingURL=useThemedStyles-C6dNoaRC.d.ts.map

package/dist/{useThemedStyles-3rUXJYgS.js → useThemedStyles-MLtE91hE.js}

@@ -408,4 +408,4 @@ function useThemedStyles(props, factory, options) {
 
 //#endregion
 export { styled as n, WEIGHTS as r, useThemedStyles as t };
-//# sourceMappingURL=useThemedStyles-3rUXJYgS.js.map
+//# sourceMappingURL=useThemedStyles-MLtE91hE.js.map

package/dist/useThemedStyles-MLtE91hE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedStyles-MLtE91hE.js","names":["parts: string[]","WEIGHTS: FontWeights","COMMON_MAP: Record<\n  keyof CommonStyleProps,\n  (value: any, out: React.CSSProperties) => void\n>","out: React.CSSProperties","inline: any","rulesBySlot: any","out: any"],"sources":["../src/hooks/useThemedStyles/utils/hasString.ts","../src/hooks/useThemedStyles/utils/stableStringfy.ts","../src/hooks/useThemedStyles/utils/injectSlotsRule.ts","../src/hooks/useThemedStyles/utils/mergeStyleMaps.ts","../src/hooks/useThemedStyles/types/styleProps.ts","../src/hooks/useThemedStyles/types/useThemedStyles.ts","../src/hooks/useThemedStyles/utils/resolveCommonStyleProps.ts","../src/hooks/useThemedStyles/utils/splitRules.ts","../src/hooks/useThemedStyles/utils/stripCommonProps.ts","../src/hooks/useThemedStyles/index.ts"],"sourcesContent":["/**\n * Small deterministic hash for strings (djb2 variant).\n * Used to generate stable class ids and cache keys.\n */\nexport function hashStr(str: string) {\n  let h = 5381\n  for (let i = 0; i < str.length; i++) h = (h * 33) ^ str.charCodeAt(i)\n  return (h >>> 0).toString(36)\n}\n","/**\n * Stable stringify (order-independent) for hashing.\n * Sorts object keys to keep output deterministic.\n */\nexport function stableStringify(obj: any): string {\n  if (obj == null || typeof obj !== 'object') return String(obj)\n  if (Array.isArray(obj)) return `[${obj.map(stableStringify).join(',')}]`\n  const keys = Object.keys(obj).sort()\n  return `{${keys.map(k => `${k}:${stableStringify(obj[k])}`).join(',')}}`\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Utils\nimport { hashStr } from './hasString'\nimport { stableStringify } from './stableStringfy'\n\n// Types\nimport type { RuleMap } from '../types'\n\n/**\n * Single <style> tag used for all runtime rules.\n */\nconst STYLE_ID = '__px_runtime_rules__'\n\n/**\n * Prevents injecting identical rules multiple times.\n */\nconst CACHE = new Set<string>()\n\n/**\n * Ensures the runtime <style> element exists and returns it.\n */\nfunction ensureStyleEl(): HTMLStyleElement | null {\n  if (typeof document === 'undefined') return null\n  let el = document.getElementById(STYLE_ID) as HTMLStyleElement | null\n  if (!el) {\n    el = document.createElement('style')\n    el.id = STYLE_ID\n    document.head.appendChild(el)\n  }\n  return el\n}\n\n/**\n * CSS properties that should NOT automatically receive \"px\" when given a number.\n *\n * Example:\n * - opacity: 0.5  (NOT 0.5px)\n * - zIndex: 10    (NOT 10px)\n * - lineHeight: 1.2 (NOT 1.2px)\n */\nconst UNITLESS = new Set([\n  'opacity',\n  'zIndex',\n  'fontWeight',\n  'flex',\n  'flexGrow',\n  'flexShrink',\n  'order',\n  'lineHeight'\n])\n\n/**\n * Converts camelCase CSS property names to kebab-case.\n * Keeps CSS variables intact (e.g. \"--px-bg\").\n */\nfunction toKebab(prop: string) {\n  if (prop.startsWith('--')) return prop\n  return prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)\n}\n\n/**\n * Converts a JS value to a CSS value.\n *\n * - `number` => `\"${n}px\"` for most properties\n * - `number` => `\"${n}\"` for unitless properties\n * - `string` => string as-is\n */\nfunction toCssValue(prop: string, value: any) {\n  if (value == null) return null\n  if (typeof value === 'number' && !UNITLESS.has(prop)) return `${value}px`\n  return String(value)\n}\n\n/**\n * Converts a declaration object to CSS string.\n *\n * Example:\n * `{ backgroundColor: \"red\", padding: 8 }`\n * => `\"background-color:red;padding:8px;\"`\n */\nfunction declToCss(decl: Record<string, any>) {\n  const parts: string[] = []\n  for (const [k, v] of Object.entries(decl)) {\n    const cssValue = toCssValue(k, v)\n    if (cssValue == null) continue\n    parts.push(`${toKebab(k)}:${cssValue};`)\n  }\n  return parts.join('')\n}\n\n/**\n * Scopes a selector to a generated slot class.\n *\n * Rules:\n * - selectors containing \"&\" are replaced: \"&:hover\" => \".slot:hover\"\n * - selectors starting with \":\" become pseudo: \":hover\" => \".slot:hover\"\n * - otherwise it's treated as descendant: \"p\" => \".slot p\"\n */\nfunction scopeSelector(selector: string, baseClass: string) {\n  const base = `.${baseClass}`\n\n  if (selector.includes('&')) return selector.replaceAll('&', base)\n  if (selector.startsWith(':')) return `${base}${selector}`\n  return `${base} ${selector}`\n}\n\n/**\n * Injects CSS rules for one slot class into the runtime <style> tag.\n *\n * The injected CSS is cached using a hash of (slotClass + rules).\n */\nexport function injectSlotRules(slotClass: string, rules?: RuleMap) {\n  if (!rules || Object.keys(rules).length === 0) return\n\n  if (typeof document === 'undefined') return\n\n  const signature = `${slotClass}:${stableStringify(rules)}`\n  const key = hashStr(signature)\n  if (CACHE.has(key)) return\n\n  const css = Object.entries(rules)\n    .map(\n      ([sel, decl]) => `${scopeSelector(sel, slotClass)}{${declToCss(decl)}}`\n    )\n    .join('\\n')\n\n  const el = ensureStyleEl()\n  if (!el) return\n\n  el.appendChild(document.createTextNode(`\\n${css}\\n`))\n  CACHE.add(key)\n}\n","/**\n * Shallow-merge style maps slot-by-slot.\n * Warns when override contains unknown slots (developer UX).\n */\n\nimport type { SlotStyle, StyleMap } from '../types'\n\nexport function mergeStyleMaps<\n  T extends StyleMap,\n  X extends Partial<Record<keyof T, SlotStyle>>\n>(base: T, override?: X): T {\n  if (!override) return base\n  const out = { ...base } as T\n\n  for (const key in override) {\n    out[key] = { ...(base[key] ?? {}), ...(override[key] ?? {}) } as any\n  }\n\n  return out\n}\n","type Space = number | string\ntype Size = number | string\n\nexport interface MarginProps {\n  m?: Space\n  mx?: Space\n  my?: Space\n  mt?: Space\n  mr?: Space\n  mb?: Space\n  ml?: Space\n}\n\nexport interface PaddingProps {\n  p?: Space\n  px?: Space\n  py?: Space\n  pt?: Space\n  pr?: Space\n  pb?: Space\n  pl?: Space\n}\n\nexport interface FontWeights {\n  light: number\n  regular: number\n  medium: number\n  bold: number\n  black: number\n}\n\nexport interface TextProps {\n  fontSize?: number | string\n  lineHeight?: number | string\n  fontWeight?: keyof FontWeights | (number & {})\n  textAlign?: React.CSSProperties['textAlign']\n}\n\nexport interface LayoutProps {\n  w?: Size\n  h?: Size\n  minW?: Size\n  maxW?: Size\n  minH?: Size\n  maxH?: Size\n}\n\nexport type CommonStyleProps = MarginProps &\n  PaddingProps &\n  TextProps &\n  LayoutProps\n\nexport const WEIGHTS: FontWeights = {\n  light: 300,\n  regular: 400,\n  medium: 500,\n  bold: 700,\n  black: 900\n}\n","/**\n * Allows CSS Variables to be used in inline styles.\n *\n * Example:\n * ```ts\n * const style: CSSVars = { \"--btn-bg\": \"#111\", background: \"var(--btn-bg)\" }\n * ```\n */\nexport type CSSVars = React.CSSProperties &\n  Record<`--${string}`, string | number>\n\n/**\n * A rule declaration is like CSSProperties, but also supports CSS variables.\n * Used inside `__rules`.\n */\nexport type RuleDecl = React.CSSProperties &\n  Record<`--${string}`, string | number>\n\n/**\n * Map of selectors to declarations.\n *\n * Key examples:\n * - \"&:hover\"\n * - \"& > p\"\n * - \":focus-visible\"        (auto-scoped to the slot class)\n * - \"::before\"             (auto-scoped)\n * - \"span\"                 (scoped as descendant)\n * - \"&::-webkit-scrollbar\" (scoped)\n */\nexport type RuleMap = Record<string, RuleDecl>\n\n/**\n * Slot style supports a reserved `__rules` key.\n *\n * - Everything EXCEPT `__rules` is applied as inline style.\n * - `__rules` is converted into runtime CSS and injected into a <style> tag.\n *\n * This enables hover, pseudo-elements, descendant selectors, and vendor selectors.\n */\nexport type SlotStyle = (React.CSSProperties | CSSVars) & {\n  __rules?: RuleMap\n}\n\n/**\n * A map of \"slots\" to styles.\n *\n * Example:\n * ```ts\n * {\n *   container: {\n *    ...,\n *\n *    __rules: {\n *      '&:hover': { ... },\n *      ...\n *    }\n *   },\n *   label: { ... },\n *   icon: { ... }\n * }\n * ```\n */\nexport type StyleMap = Record<string, SlotStyle>\n\n/**\n * A style factory receives component props and returns a slot style map.\n */\nexport type StylesFactory<TProps, TStyles extends StyleMap> = (\n  props: TProps\n) => TStyles\n\n/**\n * Options for `useThemedStyles`.\n */\nexport type UseThemedStylesOptions<TProps, TStyles extends StyleMap> = {\n  /**\n   * Optional optimization.\n   *\n   * When provided, the hook memoizes using the returned values instead of depending\n   * on the entire `props` object reference.\n   *\n   * Recommended: create a `pickXStyleProps` per component.\n   *\n   * Example:\n   * ```ts\n   * pick: (p) => [p.variant, p.size, p.disabled, p.color]\n   * ```\n   */\n  pick?: (props: TProps) => readonly unknown[]\n\n  /**\n   * Optional manual dependencies (highest priority).\n   * If provided, `deps` is used instead of `pick` or `props`.\n   */\n  deps?: readonly unknown[]\n\n  /**\n   * Optional per-slot override.\n   *\n   * The override is shallow-merged per slot:\n   *   mergedSlot = { ...baseSlot, ...overrideSlot }\n   *\n   * Example:\n   * ```ts\n   * override: { container: { padding: \"0 24px\" } }\n   * ```\n   */\n  override?: Partial<Record<keyof TStyles, SlotStyle>>\n\n  /**\n   * When true, reads \"common style props\" from `props`\n   * and applies them on top of the chosen slot (default: \"container\").\n   */\n  applyCommonProps?: boolean\n\n  /**\n   * Where to apply common style props.\n   *\n   * Defaults to:\n   *  - \"container\" if that slot exists\n   *  - otherwise the first slot key returned by the style factory\n   */\n  commonSlot?: keyof TStyles\n\n  /**\n   * Optional debug label to make generated class names more readable.\n   * Example: \"Button\" => \"pxr-Button-<hash>__container\"\n   */\n  debugName?: string\n}\n\n/**\n * Extracts the keys (slots) from a StyleMap that explicitly define `__rules`.\n *\n * This utility type iterates over all slots in a StyleMap and produces a union\n * of slot names whose style object contains a `__rules` property.\n *\n * It is typically used to statically determine which slots require a generated\n * CSS class for scoping pseudo-selectors, nested selectors, or vendor rules.\n *\n * @typeParam T - A StyleMap whose slots may optionally define `__rules`.\n *\n * @example\n * ```ts\n * type Styles = {\n *   wrapper: { __rules: RuleMap }\n *   input: {}\n *   error: {}\n * }\n *\n * type Result = SlotsWithRules<Styles>\n * // \"wrapper\"\n * ```\n */\ntype SlotsWithRules<T extends StyleMap> = {\n  [K in keyof T]: T[K] extends { __rules: RuleMap } ? K : never\n}[keyof T]\n\n/**\n * Maps only the slots that define `__rules` to their generated CSS class names.\n *\n * This type is used to type the `classes` object returned by `useThemedStyles`,\n * ensuring that:\n *\n * - Only slots that actually declare `__rules` are exposed\n * - Consumers are guided to apply `className` only where it is required\n * - Accidental usage of classes on slots without rules is prevented at compile time\n *\n * @typeParam T - A StyleMap whose slots may or may not declare `__rules`.\n *\n * @example\n * ```ts\n * type Styles = {\n *   wrapper: { __rules: RuleMap }\n *   input: {}\n * }\n *\n * type Classes = ClassesWithRules<Styles>\n * // { wrapper: string }\n * ```\n */\nexport type ClassesWithRules<T extends StyleMap> = Record<\n  SlotsWithRules<T>,\n  string\n>\n\nexport type SplitResult<TStyles extends StyleMap> = {\n  /**\n   * Inline styles only (slot styles with `__rules` removed).\n   */\n  inline: Record<keyof TStyles, Omit<TStyles[keyof TStyles], '__rules'>>\n\n  /**\n   * Extracted rule maps by slot.\n   */\n  rulesBySlot: Partial<Record<keyof TStyles, RuleMap>>\n}\n\n/**\n * A function that returns a style map.\n */\ntype StylesFactoryAny = (...args: any[]) => StyleMap\n\n/**\n * A map of partial style maps.\n */\nexport type TypeStyles<TFactory extends StylesFactoryAny> = Partial<{\n  [K in keyof ReturnType<TFactory>]: SlotStyle\n}>\n\n/**\n * Creates a partial version of the return type of a style factory function.\n *\n * This utility type is useful for defining style overrides, allowing consumers\n * to provide only a subset of the styles returned by a given function.\n *\n * @template T - A function type that returns a styles object.\n *\n * @example\n * ```ts\n * const createInputStyles = () => ({\n *   container: '...',\n *   input: '...'\n * });\n *\n * type InputStylesOverride = StylesOf<typeof createInputStyles>;\n * // {\n * //   container?: string;\n * //   input?: string;\n * // }\n * ```\n */\nexport type StylesOf<T extends (...args: any) => any> = Partial<ReturnType<T>>\n\n/**\n * Creates a style map from a plain object.\n */\nexport const styled = <T extends Record<string, SlotStyle>>(styles: T) => styles\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Types\nimport { WEIGHTS, type CommonStyleProps } from '../types'\n\nfunction toCss(v: number | string | undefined) {\n  return typeof v === 'number' ? `${v}rem` : v\n}\n\n/**\n * Source of truth: common prop -> how it maps into CSSProperties.\n * Add new common props ONLY here.\n */\nconst COMMON_MAP: Record<\n  keyof CommonStyleProps,\n  (value: any, out: React.CSSProperties) => void\n> = {\n  // margin\n  m: (v, o) => {\n    o.margin = toCss(v)\n  },\n  mx: (v, o) => {\n    o.marginLeft = toCss(v)\n    o.marginRight = toCss(v)\n  },\n  my: (v, o) => {\n    o.marginTop = toCss(v)\n    o.marginBottom = toCss(v)\n  },\n  mt: (v, o) => {\n    o.marginTop = toCss(v)\n  },\n  mr: (v, o) => {\n    o.marginRight = toCss(v)\n  },\n  mb: (v, o) => {\n    o.marginBottom = toCss(v)\n  },\n  ml: (v, o) => {\n    o.marginLeft = toCss(v)\n  },\n\n  // padding\n  p: (v, o) => {\n    o.padding = toCss(v)\n  },\n  px: (v, o) => {\n    o.paddingLeft = toCss(v)\n    o.paddingRight = toCss(v)\n  },\n  py: (v, o) => {\n    o.paddingTop = toCss(v)\n    o.paddingBottom = toCss(v)\n  },\n  pt: (v, o) => {\n    o.paddingTop = toCss(v)\n  },\n  pr: (v, o) => {\n    o.paddingRight = toCss(v)\n  },\n  pb: (v, o) => {\n    o.paddingBottom = toCss(v)\n  },\n  pl: (v, o) => {\n    o.paddingLeft = toCss(v)\n  },\n\n  // text\n  fontSize: (v, o) => {\n    o.fontSize = toCss(v)\n  },\n  fontWeight: (v, o) => {\n    o.fontWeight = v in WEIGHTS ? WEIGHTS[v as keyof typeof WEIGHTS] : v\n  },\n  lineHeight: (v, o) => {\n    o.lineHeight = toCss(v)\n  },\n  textAlign: (v, o) => {\n    o.textAlign = v\n  },\n\n  // layout\n  w: (v, o) => {\n    o.width = toCss(v)\n  },\n  h: (v, o) => {\n    o.height = toCss(v)\n  },\n  minW: (v, o) => {\n    o.minWidth = toCss(v)\n  },\n  maxW: (v, o) => {\n    o.maxWidth = toCss(v)\n  },\n  minH: (v, o) => {\n    o.minHeight = toCss(v)\n  },\n  maxH: (v, o) => {\n    o.maxHeight = toCss(v)\n  }\n}\n\nexport const COMMON_KEYS = Object.keys(COMMON_MAP) as Array<\n  keyof CommonStyleProps\n>\n\nexport function hasAnyCommonStyleProps(props: Partial<CommonStyleProps>) {\n  for (const k of COMMON_KEYS) {\n    if (props[k] != null) return true\n  }\n  return false\n}\n\nexport function resolveCommonStyleProps(\n  props: Partial<CommonStyleProps>\n): React.CSSProperties {\n  const out: React.CSSProperties = {}\n\n  for (const k of COMMON_KEYS) {\n    const value = props[k]\n    if (value != null) COMMON_MAP[k](value, out)\n  }\n\n  return out\n}\n\n/**\n * Applies common style props (if present) to a chosen slot.\n * Common props are resolved by `resolveCommonStyleProps`.\n */\nexport function applyCommonsToStyles<TStyles extends Record<string, any>>(\n  styles: TStyles,\n  props: Partial<CommonStyleProps>,\n  slotOverride?: keyof TStyles\n): TStyles {\n  if (!hasAnyCommonStyleProps(props)) return styles\n\n  const keys = Object.keys(styles)\n  if (keys.length === 0) return styles\n\n  const slot =\n    slotOverride ??\n    (('container' in styles ? 'container' : keys[0]) as keyof TStyles)\n\n  const common = resolveCommonStyleProps(props)\n\n  return {\n    ...styles,\n    [slot]: { ...(styles[slot] ?? {}), ...common }\n  } as TStyles\n}\n","// Types\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport type { SplitResult, StyleMap } from '../types'\n\n/**\n * Splits the style map into:\n * - `inline`: slot styles without `__rules`\n * - `rulesBySlot`: extracted `__rules` grouped by slot\n *\n * This lets us:\n * - apply inline styles directly via `style={...}`\n * - inject selectors/pseudos via generated CSS classes\n */\nexport function splitRules<TStyles extends StyleMap>(\n  styles: TStyles\n): SplitResult<TStyles> {\n  const inline: any = {}\n  const rulesBySlot: any = {}\n\n  for (const key in styles) {\n    const slot = styles[key]\n    if (!slot) continue\n\n    const { __rules, ...rest } = slot as any\n    inline[key] = rest\n\n    if (__rules && Object.keys(__rules).length > 0) {\n      rulesBySlot[key] = __rules\n    }\n  }\n\n  return { inline, rulesBySlot }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\nimport type { CommonStyleProps } from '../types'\n\nimport { COMMON_KEYS } from './resolveCommonStyleProps'\n\nconst COMMON_KEY_SET = new Set<string>(COMMON_KEYS as readonly string[])\n\nexport function stripCommonProps<T extends object>(\n  props: T\n): Omit<T, keyof CommonStyleProps> {\n  const out: Record<string, unknown> = {}\n\n  for (const key of Object.keys(props as any)) {\n    if (!COMMON_KEY_SET.has(key)) {\n      out[key] = (props as any)[key]\n    }\n  }\n\n  return out as Omit<T, keyof CommonStyleProps>\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// External Libraries\nimport { useMemo, useInsertionEffect } from 'react'\n\n// Utils\nimport {\n  hashStr,\n  splitRules,\n  mergeStyleMaps,\n  injectSlotRules,\n  stableStringify,\n  applyCommonsToStyles\n} from './utils'\n\n// Types\nimport type {\n  CSSVars,\n  RuleMap,\n  StyleMap,\n  StylesFactory,\n  ClassesWithRules,\n  UseThemedStylesOptions\n} from './types'\n\n/**\n * useThemedStyles\n *\n * A React-Native-like style factory hook for React Web that also supports:\n * - CSS variables in inline styles\n * - Pseudo selectors, nested selectors, and vendor selectors via `__rules`\n *\n * It returns two maps:\n * - `styles`: inline styles for each slot\n * - `classes`: generated classes for each slot (needed for `__rules`)\n *\n * Usage:\n * ```tsx\n * const { styles, classes } = useThemedStyles(props, createStyles)\n *\n * return (\n *   <button style={styles.item} className={classes.item}>\n *     <p style={styles.label} className={classes.label}>Hello</p>\n *   </button>\n * )\n * ```\n *\n * Notes:\n * - If a slot has no `__rules`, you can omit `className` for that slot.\n * - If you use `__rules`, you MUST apply the corresponding class for scoping.\n */\nexport function useThemedStyles<TProps, TStyles extends StyleMap>(\n  props: TProps,\n  factory: StylesFactory<TProps, TStyles>,\n  options?: UseThemedStylesOptions<TProps, TStyles>\n): {\n  styles: Record<keyof TStyles, React.CSSProperties | CSSVars>\n  classes: ClassesWithRules<TStyles>\n} {\n  /**\n   * Memoization priority:\n   * 1) deps (manual)\n   * 2) pick(props) (recommended)\n   * 3) props reference (default behavior)\n   */\n  const memoKey =\n    options?.deps ?? (options?.pick ? options.pick(props) : [props])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled by deps/pick\n  const raw = useMemo(() => factory(props), [factory, ...memoKey])\n\n  const { inline, rulesBySlot } = useMemo(() => splitRules(raw), [raw])\n\n  /**\n   * `override` is often passed inline (`{ container: {...} }`), which changes reference\n   * every render and would break memoization.\n   *\n   * We create a stable signature string from the override and use it as the dependency.\n   * This makes the merge re-run only when override *content* changes.\n   */\n  const overrideSig = useMemo(\n    () => stableStringify(options?.override ?? {}),\n    // biome-ignore lint/correctness/useExhaustiveDependencies: we intentionally depend on reference here to recompute signature\n    [options?.override] as readonly unknown[]\n  )\n\n  /**\n   * Merge inline styles with optional override (shallow merge per slot).\n   *\n   * Dependency is `overrideSig` (content), not the object reference.\n   */\n  const merged = useMemo(\n    () => {\n      return mergeStyleMaps(\n        inline as unknown as StyleMap,\n        options?.override as any\n      ) as any\n    },\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n    [inline, overrideSig] as readonly unknown[]\n  )\n\n  /**\n   * Optionally apply common style props (spacing/typography/layout) on top of a slot.\n   */\n  const withCommons = useMemo(() => {\n    if (!options?.applyCommonProps) return merged\n    return applyCommonsToStyles(merged as any, props as any, options.commonSlot)\n  }, [merged, props, options?.applyCommonProps, options?.commonSlot])\n\n  /**\n   * Base id is derived only from the rules signature.\n   * This keeps class names stable whenever rules don't change.\n   */\n  const baseId = useMemo(() => {\n    const sig = stableStringify(rulesBySlot)\n    const key = hashStr(sig)\n    return options?.debugName ? `pxr-${options.debugName}-${key}` : `pxr-${key}`\n  }, [rulesBySlot, options?.debugName])\n\n  /**\n   * Generated class per slot.\n   *\n   * Important:\n   * - It must be stable unless slots or rule-signature changes.\n   * - It should NOT depend on `withCommons` (since commons may change frequently).\n   * - Use `inline` keys (slots returned by the factory) as the source of truth.\n   *\n   * Example: pxr-<hash>__item\n   */\n  const classes = useMemo(() => {\n    const out: any = {}\n    for (const slotKey of Object.keys(inline)) {\n      out[slotKey] = `${baseId}__${slotKey}`\n    }\n    return out as Record<keyof TStyles, string>\n  }, [baseId, inline])\n\n  /**\n   * Inject rules into the runtime <style> tag.\n   *\n   * We use `useInsertionEffect` so styles are inserted before layout/paint\n   * when supported (best for CSS-in-JS style injection).\n   */\n  useInsertionEffect(() => {\n    for (const slotKey of Object.keys(rulesBySlot as any)) {\n      const rules = (rulesBySlot as any)[slotKey] as RuleMap | undefined\n      if (!rules) continue\n      injectSlotRules((classes as any)[slotKey], rules)\n    }\n  }, [rulesBySlot, classes])\n\n  return { styles: withCommons as any, classes }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "",
   "keywords": [],
   "author": "softable",
@@ -70,6 +70,30 @@
     "./check-item": {
       "types": "./dist/check-item.d.ts",
       "import": "./dist/check-item.js"
+    },
+    "./popover": {
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.js"
+    },
+    "./context-menu": {
+      "types": "./dist/context-menu.d.ts",
+      "import": "./dist/context-menu.js"
+    },
+    "./use-dismiss": {
+      "types": "./dist/use-dismiss.d.ts",
+      "import": "./dist/use-dismiss.js"
+    },
+    "./use-floating": {
+      "types": "./dist/use-floating.d.ts",
+      "import": "./dist/use-floating.js"
+    },
+    "./use-virtual-anchor": {
+      "types": "./dist/use-virtual-anchor.d.ts",
+      "import": "./dist/use-virtual-anchor.js"
+    },
+    "./switch": {
+      "types": "./dist/switch.d.ts",
+      "import": "./dist/switch.js"
     }
   },
   "peerDependencies": {
@@ -121,6 +145,27 @@
       ],
       "icon-button": [
         "dist/icon-button/index.d.ts"
+      ],
+      "check-item": [
+        "dist/check-item/index.d.ts"
+      ],
+      "switch": [
+        "dist/switch/index.d.ts"
+      ],
+      "popover": [
+        "dist/popover/index.d.ts"
+      ],
+      "context-menu": [
+        "dist/context-menu/index.d.ts"
+      ],
+      "use-dismiss": [
+        "dist/use-dismiss/index.d.ts"
+      ],
+      "use-floating": [
+        "dist/use-floating/index.d.ts"
+      ],
+      "use-virtual-anchor": [
+        "dist/use-virtual-anchor/index.d.ts"
       ]
     }
   },

package/dist/Button-BrV5pWD2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-BrV5pWD2.js","names":["getBorder","createButtonLoaderStyles","getBorder","Loader: React.FC<LoaderProps>","createButtonLoaderStyles","ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/utils/animations/spiner.ts","../src/components/commons/toolkit/Loader/constants.ts","../src/components/commons/toolkit/Loader/utils.ts","../src/components/commons/toolkit/Loader/styles.ts","../src/components/commons/toolkit/Loader/index.tsx","../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["export const SPINNER_ANIMATION = {\n  animate: { rotate: 360 },\n  transition: {\n    repeat: Infinity,\n    duration: 1,\n    ease: 'linear'\n  }\n}\n","const DEFAULT_SIZE = '20px'\nconst DEFAULT_THICKNESS = '2px'\n\nconst DEFAULT_COLOR = 'white'\nconst DEFAULT_EMPTY_COLOR = 'transparent'\n\nexport { DEFAULT_SIZE, DEFAULT_THICKNESS, DEFAULT_COLOR, DEFAULT_EMPTY_COLOR }\n","// Utils\nimport { DEFAULT_THICKNESS, DEFAULT_EMPTY_COLOR } from './constants'\n\n// Types\nimport type { LoaderProps } from './types'\n\nexport function getBorder(props: LoaderProps) {\n  const thickness = props.thickness || DEFAULT_THICKNESS\n  const emptyColor = props.emptyColor || DEFAULT_EMPTY_COLOR\n\n  return `${thickness} solid ${emptyColor}`\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { LoaderProps } from './types'\nimport { getBorder } from './utils'\nimport { DEFAULT_COLOR, DEFAULT_SIZE } from './constants'\n\nexport function createButtonLoaderStyles(props: LoaderProps): StyleMap {\n  return styled({\n    container: {\n      display: ' inline-block',\n\n      width: props.size || DEFAULT_SIZE,\n      height: props.size || DEFAULT_SIZE,\n\n      borderRadius: '50%',\n      border: getBorder(props),\n      borderLeftColor: props.color || DEFAULT_COLOR\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { SPINNER_ANIMATION } from '@utils/animations'\n\n// Types\nimport type { LoaderProps } from './types'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\nexport const Loader: React.FC<LoaderProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      role=\"status\"\n      aria-label=\"Loading\"\n      style={styles.container}\n      {...SPINNER_ANIMATION}\n    />\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n  return styled({\n    container: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      borderRadius: 'var(--px-border-radius-button)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/commons/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n  color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      style={styles.container}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n    >\n      <Loader color={color} />\n    </motion.div>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\nimport type { CSSProperties } from 'react'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  disabled,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps): ReturnType<typeof styled> {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      ...getSize(size || 'md'),\n\n      width: fullWidth ? '100%' : 'fit-content',\n\n      position: 'relative',\n      display: 'flex',\n      justifyContent: textAlign || 'center',\n\n      padding: '10px var(--px-space-xl)',\n      gap: 'var(--px-space-sm)',\n\n      borderRadius: 'var(--px-radius-md)',\n\n      cursor: 'pointer',\n\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n\n      boxShadow:\n        variant === 'outlined'\n          ? `0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D`\n          : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        }\n      }\n    },\n\n    content: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n\n      padding: '0',\n      borderRadius: 'inherit',\n\n      whiteSpace: 'nowrap',\n      columnGap: 'var(--px-space-sm)'\n    }\n  })\n}\n\nfunction getSize(size: ButtonSize | string): CSSProperties {\n  switch (size) {\n    case 'lg':\n      return { minHeight: '3.25rem' }\n    case 'md':\n      return { minHeight: '2.75rem' }\n    case 'sm':\n      return { minHeight: '2.25rem' }\n    case 'xs':\n      return { minHeight: '1.75rem' }\n    default:\n      return { minHeight: size }\n  }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return 'transparent'\n\n  if (variant === 'ghost') return 'transparent'\n\n  return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-border-primary)'\n\n  if (variant === 'ghost') return 'none'\n\n  return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps) {\n  if (labelColor) return labelColor\n\n  if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n  if (variant === 'ghost') return '--px-btn-ghost-label'\n\n  return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { ButtonLoader } from './components/ButtonLoader'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n  type = 'button',\n  variant = 'filled',\n  ...rest\n}) => {\n  // Constants\n  const disabled = rest.disabled || rest.loading\n  const resolvedProps = { type, variant, disabled, ...rest }\n  const textColor = getTextColor(resolvedProps)\n  const { label, endIcon, startIcon, loading } = resolvedProps\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    resolvedProps,\n    createButtonStyles,\n    {\n      override: rest.styles,\n      applyCommonProps: true,\n      commonSlot: 'container',\n      pick: p => [p.disabled, p.loading, p.label, p.color]\n    }\n  )\n\n  // Functions\n  function handleButtonClick(event: MouseEvent<HTMLButtonElement>) {\n    if (disabled) return\n\n    if (rest.onClick) rest.onClick(event)\n  }\n\n  return (\n    <button\n      type={type}\n      disabled={disabled}\n      aria-busy={rest.loading}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleButtonClick}\n    >\n      <div style={styles.content}>\n        {startIcon ?? null}\n\n        <Typography variant={rest.labelVariant || 'b1'} color={textColor}>\n          {label}\n        </Typography>\n\n        {endIcon ?? null}\n\n        {loading ? (\n          <AnimatePresence>\n            <ButtonLoader color={textColor} />\n          </AnimatePresence>\n        ) : null}\n      </div>\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/Checkbox-CA11dJ4h.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox-CA11dJ4h.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/commons/toolkit/Checkbox/components/Label/styles.ts","../src/components/commons/toolkit/Checkbox/components/Label/index.tsx","../src/components/commons/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/commons/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/commons/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n  const { disabled } = props\n\n  return styled({\n    container: {\n      userSelect: 'none',\n      opacity: disabled ? 0.6 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      transition: 'all 200ms',\n\n      __rules: {\n        ':hover': { color: 'var(--px-color-secondary)' }\n      }\n    }\n  })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n  const { idFor, label, labelVariant } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createLabelStyles, {\n    pick: p => [p.disabled, p.labelVariant, p.label],\n    applyCommonProps: true\n  })\n\n  return (\n    <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n      <Typography variant={labelVariant ?? 'b1'} fontWeight=\"regular\">\n        {label}\n      </Typography>\n    </LabelRadix.Root>\n  )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n  return {\n    id: useId()\n  }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n  size: {\n    sm: { width: '1rem', height: '1rem' },\n    md: { width: '1.25rem', height: '1.25rem' },\n    lg: { width: '1.5rem', height: '1.5rem' }\n  },\n  radius: {\n    none: { borderRadius: 0 },\n    sm: { borderRadius: '0.25rem' },\n    md: { borderRadius: '0.375rem' },\n    lg: { borderRadius: '0.5rem' },\n    full: { borderRadius: '100%' }\n  }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps): StyleMap {\n  const {\n    color,\n    checked,\n    size = 'md',\n    radius = 'md',\n    disabled = false,\n    labelPlacement = 'right'\n  } = props\n\n  const focusIndicatorOffsetColor = '#fff'\n\n  return styled({\n    container: {\n      display: 'flex',\n      columnGap: '0.5rem',\n      alignItems: 'center',\n      '--px-ring-color': color ?? undefined,\n      flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n    },\n\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked ? color : 'white',\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n      transition: 'color 200ms',\n      opacity: disabled ? 0.5 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      ...CHECKBOX_STYLES.size[size],\n      ...CHECKBOX_STYLES.radius[radius],\n\n      __rules: {\n        '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n        '&:focus-visible': {\n          outline: 'none',\n          boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n        }\n      }\n    },\n\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'var(--px-text-primary, #4b5563)'\n    }\n  })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n  backgroundColor: string\n): 'black' | 'white' {\n  let hex = backgroundColor.replace('#', '')\n\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map(c => c + c)\n      .join('')\n  }\n\n  if (hex.length === 8) {\n    hex = hex.substring(0, 6)\n  }\n\n  if (hex.length !== 6) return 'black'\n\n  const r = parseInt(hex.substring(0, 2), 16)\n  const g = parseInt(hex.substring(2, 4), 16)\n  const b = parseInt(hex.substring(4, 6), 16)\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n  return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    icon,\n    label,\n    color,\n    labelVariant,\n    checked = false,\n    disabled = false,\n    onChange\n  } = props\n\n  const iconColor = color ? getContrastingTextColor(color) : undefined\n\n  // Hooks\n  const { id } = useCheckbox()\n\n  const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n  return (\n    <div style={styles.container}>\n      <CheckboxRadix.Root\n        style={styles.root}\n        className={classes.root}\n        id={id}\n        tabIndex={0}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={checked => onChange(checked === true)}\n      >\n        <CheckboxRadix.Indicator style={styles.indicator}>\n          {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n        </CheckboxRadix.Indicator>\n      </CheckboxRadix.Root>\n\n      {label ? (\n        <Label\n          idFor={id}\n          label={label}\n          disabled={disabled}\n          labelVariant={labelVariant}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/IconButton-BBdkzg3b.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton-BBdkzg3b.js","names":["IconButton: React.FC<IconButtonProps>"],"sources":["../src/components/commons/buttons/IconButton/styles.ts","../src/components/commons/buttons/IconButton/index.tsx"],"sourcesContent":["// Types\nimport type { CSSProperties } from 'react'\nimport type {\n  IconButtonProps,\n  IconButtonSize,\n  IconButtonVariant\n} from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createIconButtonStyles(props: IconButtonProps): StyleMap {\n  const {\n    variant = 'outlined',\n    size = 'md',\n    borderColor,\n    backgroundColor\n  } = props\n\n  return styled({\n    button: {\n      ...getSize(size),\n      backgroundColor: getBackgroundColor(variant, backgroundColor),\n      border: getBorder(variant, borderColor),\n      borderRadius: 'var(--px-radius-lg)',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n\n      boxShadow:\n        '0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D121A inset',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n        '&:disabled': {\n          opacity: '0.5',\n          cursor: 'not-allowed'\n        }\n      }\n    }\n  })\n}\n\nfunction getSize(size: IconButtonSize | string): CSSProperties {\n  switch (size) {\n    case 'lg':\n      return { minHeight: '3.25rem', minWidth: '3.25rem' }\n    case 'md':\n      return { minHeight: '2.75rem', minWidth: '2.75rem' }\n    case 'sm':\n      return { minHeight: '2.25rem', minWidth: '2.25rem' }\n    case 'xs':\n      return { minHeight: '1.75rem', minWidth: '1.75rem' }\n    default:\n      return { minHeight: size, minWidth: size }\n  }\n}\n\nfunction getBackgroundColor(\n  variant?: IconButtonVariant,\n  color?: string\n): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-outlined-bg)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-bg)'\n\n  return 'var(--px-btn-outlined-bg)'\n}\n\nfunction getBorder(variant?: IconButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n  return '1px solid var(--px-color-primary)'\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { IconButtonProps } from './types'\n\n// Styles\nimport { createIconButtonStyles } from './styles'\n\nexport const IconButton: React.FC<IconButtonProps> = props => {\n  // Constants\n  const disabled = props.isDisabled || props.isLoading\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createIconButtonStyles, {\n    pick: p => [p.size, p.variant, p.borderColor, p.backgroundColor],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'button'\n  })\n\n  return (\n    <button\n      disabled={disabled}\n      aria-busy={props.isLoading}\n      type=\"button\"\n      className={classes.button}\n      style={styles.button}\n      onClick={props.onClick}\n    >\n      {props.icon}\n    </button>\n  )\n}\n"],"mappings":";;;;AASA,SAAgB,uBAAuB,OAAkC;CACvE,MAAM,EACJ,UAAU,YACV,OAAO,MACP,aACA,oBACE;AAEJ,QAAO,OAAO,EACZ,QAAQ;EACN,GAAG,QAAQ,KAAK;EAChB,iBAAiB,mBAAmB,SAAS,gBAAgB;EAC7D,QAAQ,UAAU,SAAS,YAAY;EACvC,cAAc;EACd,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ;EACR,YAAY;EAEZ,WACE;EAEF,SAAS;GACP,WAAW,EACT,SAAS,mBACV;GACD,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,QAAQ,MAA8C;AAC7D,SAAQ,MAAR;EACE,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,QACE,QAAO;GAAE,WAAW;GAAM,UAAU;GAAM;;;AAIhD,SAAS,mBACP,SACA,OACQ;AACR,KAAI,MAAO,QAAO;AAElB,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;AAGT,SAAS,UAAU,SAA6B,OAAwB;AACtE,KAAI,MAAO,QAAO,aAAa;AAE/B,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;;;;ACvET,MAAaA,cAAwC,UAAS;CAE5D,MAAM,WAAW,MAAM,cAAc,MAAM;CAG3C,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,wBAAwB;EACzE,OAAM,MAAK;GAAC,EAAE;GAAM,EAAE;GAAS,EAAE;GAAa,EAAE;GAAgB;EAChE,UAAU,MAAM;EAChB,kBAAkB;EAClB,YAAY;EACb,CAAC;AAEF,QACE,oBAAC;EACW;EACV,aAAW,MAAM;EACjB,MAAK;EACL,WAAW,QAAQ;EACnB,OAAO,OAAO;EACd,SAAS,MAAM;YAEd,MAAM;GACA"}