softable-pixels-web 1.2.8 → 1.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{BasePopover-Bcy5d1t5.js → BasePopover-BvMT9rNx.js} +3 -3
- package/dist/{BasePopover-Bcy5d1t5.js.map → BasePopover-BvMT9rNx.js.map} +1 -1
- package/dist/{Breadcrumb-Doo-Ajul.js → Breadcrumb-D6RhaWzp.js} +4 -4
- package/dist/{Breadcrumb-Doo-Ajul.js.map → Breadcrumb-D6RhaWzp.js.map} +1 -1
- package/dist/{Button-DSMdOqri.js → Button-CxAl6MNt.js} +4 -4
- package/dist/{Button-DSMdOqri.js.map → Button-CxAl6MNt.js.map} +1 -1
- package/dist/{CheckItem-CHkw5t6c.js → CheckItem-DzRbPRpC.js} +4 -4
- package/dist/{CheckItem-CHkw5t6c.js.map → CheckItem-DzRbPRpC.js.map} +1 -1
- package/dist/{Checkbox-DU8VoDgU.js → Checkbox-Dn8CtTOP.js} +4 -4
- package/dist/{Checkbox-DU8VoDgU.js.map → Checkbox-Dn8CtTOP.js.map} +1 -1
- package/dist/{Chip-CINbb2Hf.js → Chip-BHWhib8g.js} +3 -3
- package/dist/{Chip-CINbb2Hf.js.map → Chip-BHWhib8g.js.map} +1 -1
- package/dist/{ChipList-Dspe8Tf9.js → ChipList-oW8sQ9EC.js} +5 -5
- package/dist/{ChipList-Dspe8Tf9.js.map → ChipList-oW8sQ9EC.js.map} +1 -1
- package/dist/{ColorPicker-CdECHCbh.js → ColorPicker-Dc83Om7x.js} +5 -5
- package/dist/{ColorPicker-CdECHCbh.js.map → ColorPicker-Dc83Om7x.js.map} +1 -1
- package/dist/{ContextMenu-CtRqfo8w.js → ContextMenu-CRd1Fgl0.js} +7 -6
- package/dist/{ContextMenu-CtRqfo8w.js.map → ContextMenu-CRd1Fgl0.js.map} +1 -1
- package/dist/DatePicker-QLL-43NJ.js +867 -0
- package/dist/DatePicker-QLL-43NJ.js.map +1 -0
- package/dist/{ErrorMessage-DOkrG22I.js → ErrorMessage-W0yfhfJP.js} +2 -2
- package/dist/{ErrorMessage-DOkrG22I.js.map → ErrorMessage-W0yfhfJP.js.map} +1 -1
- package/dist/{Icon-C_yI8e6Z.js → Icon-Ded27Khw.js} +70 -2
- package/dist/Icon-Ded27Khw.js.map +1 -0
- package/dist/{IconButton-DQaptukh.js → IconButton-qBhQj30V.js} +2 -2
- package/dist/{IconButton-DQaptukh.js.map → IconButton-qBhQj30V.js.map} +1 -1
- package/dist/{InfoSummary-CQnTQYJJ.js → InfoSummary-CKymtoj5.js} +3 -3
- package/dist/{InfoSummary-CQnTQYJJ.js.map → InfoSummary-CKymtoj5.js.map} +1 -1
- package/dist/{Input-Bi_mgUry.js → Input-D9FPPcEO.js} +6 -6
- package/dist/{Input-Bi_mgUry.js.map → Input-D9FPPcEO.js.map} +1 -1
- package/dist/{Label-CPua_PPu.js → Label-DYeW5MAo.js} +2 -2
- package/dist/{Label-CPua_PPu.js.map → Label-DYeW5MAo.js.map} +1 -1
- package/dist/{Loader-DqDWamjq.js → Loader-DD_kbMHz.js} +2 -2
- package/dist/{Loader-DqDWamjq.js.map → Loader-DD_kbMHz.js.map} +1 -1
- package/dist/{MaskModule-CUFXLKZU.js → MaskModule-B9d_CLgH.js} +1 -1
- package/dist/{MaskModule-CUFXLKZU.js.map → MaskModule-B9d_CLgH.js.map} +1 -1
- package/dist/{Popover-DGYahpRI.js → Popover-DwxxEmVF.js} +6 -5
- package/dist/Popover-DwxxEmVF.js.map +1 -0
- package/dist/{SearchInput-Ol5FJDHS.js → SearchInput-DzFRhAYc.js} +4 -4
- package/dist/{SearchInput-Ol5FJDHS.js.map → SearchInput-DzFRhAYc.js.map} +1 -1
- package/dist/{Select-BO2A8Wdu.js → Select-D5EznEQW.js} +8 -8
- package/dist/{Select-BO2A8Wdu.js.map → Select-D5EznEQW.js.map} +1 -1
- package/dist/{Skeleton-CixPhMzv.js → Skeleton-BU7587-Z.js} +2 -2
- package/dist/{Skeleton-CixPhMzv.js.map → Skeleton-BU7587-Z.js.map} +1 -1
- package/dist/{Switch-ySpoqwBk.js → Switch-DaFbtUYw.js} +2 -2
- package/dist/{Switch-ySpoqwBk.js.map → Switch-DaFbtUYw.js.map} +1 -1
- package/dist/{TabSwitch-B5deD9nz.js → TabSwitch-BrFTSD3N.js} +3 -3
- package/dist/{TabSwitch-B5deD9nz.js.map → TabSwitch-BrFTSD3N.js.map} +1 -1
- package/dist/{TextArea-BvSrZjQe.js → TextArea-Cd9ybdiN.js} +5 -5
- package/dist/{TextArea-BvSrZjQe.js.map → TextArea-Cd9ybdiN.js.map} +1 -1
- package/dist/{ThemeContext-DDE631iU.js → ThemeContext-CeJlZRoI.js} +1 -1
- package/dist/{ThemeContext-DDE631iU.js.map → ThemeContext-CeJlZRoI.js.map} +1 -1
- package/dist/{Typography-CKSjnDPX.js → Typography-DOmGYHd6.js} +2 -2
- package/dist/{Typography-CKSjnDPX.js.map → Typography-DOmGYHd6.js.map} +1 -1
- package/dist/base-popover.d.ts +3 -3
- package/dist/base-popover.js +5 -5
- package/dist/breadcrumb.d.ts +1 -1
- package/dist/breadcrumb.js +4 -4
- package/dist/button.d.ts +2 -2
- package/dist/button.js +4 -4
- package/dist/check-item.d.ts +1 -1
- package/dist/check-item.js +4 -4
- package/dist/checkbox.d.ts +2 -2
- package/dist/checkbox.js +4 -4
- package/dist/chip-list.d.ts +1 -1
- package/dist/chip-list.js +6 -6
- package/dist/chip.d.ts +1 -1
- package/dist/chip.js +3 -3
- package/dist/color-picker.d.ts +1 -1
- package/dist/color-picker.js +6 -6
- package/dist/context-menu.d.ts +1 -1
- package/dist/context-menu.js +8 -8
- package/dist/date-picker.d.ts +2 -0
- package/dist/date-picker.js +13 -0
- package/dist/icon-button.d.ts +1 -1
- package/dist/icon-button.js +2 -2
- package/dist/{index-BXZ-OM5P.d.ts → index-4OeaL4BA.d.ts} +2 -2
- package/dist/{index-DVB1TrWc.d.ts → index-B-QrzzEt.d.ts} +2 -2
- package/dist/{index-CuP_knGM.d.ts → index-BSRlF4M0.d.ts} +4 -4
- package/dist/{index-41HYkx0w.d.ts → index-BoDAFJKA.d.ts} +5 -5
- package/dist/{index-D5Zfkj5F.d.ts → index-BsuIAPD6.d.ts} +4 -4
- package/dist/{index-CBfW89pi.d.ts → index-CHvftTxv.d.ts} +2 -2
- package/dist/{index-XPk_mchF.d.ts → index-CMdalYHP.d.ts} +4 -4
- package/dist/{index-hJBCuHQu.d.ts → index-CRG-GDQG.d.ts} +3 -3
- package/dist/{index-BmFkBYVJ.d.ts → index-Cx7UfQsD.d.ts} +4 -4
- package/dist/{index-B9mLvqQT.d.ts → index-D3HezA0l.d.ts} +1 -1
- package/dist/{index-DEAzVsKY.d.ts → index-DPF3Lmsv.d.ts} +2 -2
- package/dist/{index-YN8kSeey.d.ts → index-DZ68m68y.d.ts} +2 -2
- package/dist/{index-CqmzOJc_.d.ts → index-GDD7A_-t.d.ts} +2 -2
- package/dist/{index-5eyvKw2O.d.ts → index-JY4VS1B7.d.ts} +1 -1
- package/dist/index-Y5DBdVde.d.ts +34 -0
- package/dist/{index-CAMj03qs.d.ts → index-c9Jj2h1z.d.ts} +1 -1
- package/dist/{index-CEGANhbI.d.ts → index-duKRdLdx.d.ts} +1 -1
- package/dist/{index-y7Z04PKd.d.ts → index-ece25l8L.d.ts} +3 -3
- package/dist/{index-BY5IQiDl.d.ts → index-vh_aAfJM.d.ts} +1 -1
- package/dist/{index-D5OTHkPO.d.ts → index-yetEYul3.d.ts} +2 -2
- package/dist/index.d.ts +24 -23
- package/dist/index.js +31 -30
- package/dist/info-summary.js +3 -3
- package/dist/input.d.ts +1 -1
- package/dist/input.js +7 -7
- package/dist/mask-modules.d.ts +1 -1
- package/dist/mask-modules.js +1 -1
- package/dist/popover.d.ts +2 -2
- package/dist/popover.js +4 -4
- package/dist/searchInput.d.ts +1 -1
- package/dist/searchInput.js +5 -5
- package/dist/select.d.ts +2 -2
- package/dist/select.js +11 -11
- package/dist/skeleton.d.ts +1 -1
- package/dist/skeleton.js +2 -2
- package/dist/{styleProps-BTRkIoXb.d.ts → styleProps-B2q_-j9h.d.ts} +1 -1
- package/dist/switch.d.ts +1 -1
- package/dist/switch.js +2 -2
- package/dist/tab-switch.d.ts +1 -1
- package/dist/tab-switch.js +3 -3
- package/dist/text-area.d.ts +1 -1
- package/dist/text-area.js +5 -5
- package/dist/theme-context.d.ts +1 -1
- package/dist/theme-context.js +1 -1
- package/dist/{types-CLnohr-1.d.ts → types-C4eY6XF3.d.ts} +1 -1
- package/dist/{types-C0u1I3AZ.d.ts → types-CRiyrGtn.d.ts} +4 -3
- package/dist/{types-aSZkOYQF.d.ts → types-Cb6hrEtg.d.ts} +3 -3
- package/dist/{types-CTYkmfAB.d.ts → types-DaDG9cRW.d.ts} +1 -1
- package/dist/typography.d.ts +1 -1
- package/dist/typography.js +2 -2
- package/dist/use-dismiss.js +1 -1
- package/dist/use-floating.d.ts +1 -1
- package/dist/use-floating.js +1 -1
- package/dist/{useDismiss-D-z-tDnD.js → useDismiss-B4TZHcKX.js} +1 -1
- package/dist/{useDismiss-D-z-tDnD.js.map → useDismiss-B4TZHcKX.js.map} +1 -1
- package/dist/{useFloating-CNaOVlhE.js → useFloating-CS5NHgoq.js} +1 -1
- package/dist/{useFloating-CNaOVlhE.js.map → useFloating-CS5NHgoq.js.map} +1 -1
- package/dist/{useThemedStyles-BJWB5BTH.js → useThemedStyles-B1E0m8Ih.js} +1 -1
- package/dist/{useThemedStyles-BJWB5BTH.js.map → useThemedStyles-B1E0m8Ih.js.map} +1 -1
- package/dist/{useThemedStyles-B4g2CRsn.d.ts → useThemedStyles-BVQKnv5r.d.ts} +1 -1
- package/package.json +16 -6
- package/dist/Icon-C_yI8e6Z.js.map +0 -1
- package/dist/Popover-DGYahpRI.js.map +0 -1
- /package/dist/{chunk-BgJRG4ys.js → chunk-Bv3O74iX.js} +0 -0
package/dist/use-floating.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDismiss-
|
|
1
|
+
{"version":3,"file":"useDismiss-B4TZHcKX.js","names":[],"sources":["../src/hooks/useDismiss/index.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react'\n\ntype UseDismissParams = {\n open: boolean\n dismissScope?: string\n closeOnEscape?: boolean\n closeOnOutsideClick?: boolean\n refs: Array<RefObject<HTMLElement | null>>\n onClose: () => void\n}\n\nexport function useDismiss({\n open,\n refs,\n dismissScope,\n closeOnEscape = true,\n closeOnOutsideClick = true,\n onClose\n}: UseDismissParams) {\n useEffect(() => {\n if (!open) return\n\n const isInsideSomeRef = (node: Node) =>\n refs.some(r => r.current?.contains(node))\n\n const isInsideScope = (target: EventTarget | null) => {\n if (!dismissScope) return false\n if (!(target instanceof Element)) return false\n return !!target.closest?.(`[data-dismiss-scope=\"${dismissScope}\"]`)\n }\n\n const onPointerDownCapture = (e: PointerEvent) => {\n if (!closeOnOutsideClick) return\n const t = e.target as Node\n\n if (isInsideScope(e.target)) return\n\n if (isInsideSomeRef(t)) return\n\n onClose()\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (!closeOnEscape) return\n if (e.key === 'Escape') onClose()\n }\n\n document.addEventListener('pointerdown', onPointerDownCapture, true)\n document.addEventListener('keydown', onKeyDown)\n\n return () => {\n document.removeEventListener('pointerdown', onPointerDownCapture, true)\n document.removeEventListener('keydown', onKeyDown)\n }\n }, [open, onClose, refs, closeOnOutsideClick, closeOnEscape, dismissScope])\n}\n"],"mappings":";;;AAWA,SAAgB,WAAW,EACzB,MACA,MACA,cACA,gBAAgB,MAChB,sBAAsB,MACtB,WACmB;AACnB,iBAAgB;AACd,MAAI,CAAC,KAAM;EAEX,MAAM,mBAAmB,SACvB,KAAK,MAAK,MAAK,EAAE,SAAS,SAAS,KAAK,CAAC;EAE3C,MAAM,iBAAiB,WAA+B;AACpD,OAAI,CAAC,aAAc,QAAO;AAC1B,OAAI,EAAE,kBAAkB,SAAU,QAAO;AACzC,UAAO,CAAC,CAAC,OAAO,UAAU,wBAAwB,aAAa,IAAI;;EAGrE,MAAM,wBAAwB,MAAoB;AAChD,OAAI,CAAC,oBAAqB;GAC1B,MAAM,IAAI,EAAE;AAEZ,OAAI,cAAc,EAAE,OAAO,CAAE;AAE7B,OAAI,gBAAgB,EAAE,CAAE;AAExB,YAAS;;EAGX,MAAM,aAAa,MAAqB;AACtC,OAAI,CAAC,cAAe;AACpB,OAAI,EAAE,QAAQ,SAAU,UAAS;;AAGnC,WAAS,iBAAiB,eAAe,sBAAsB,KAAK;AACpE,WAAS,iBAAiB,WAAW,UAAU;AAE/C,eAAa;AACX,YAAS,oBAAoB,eAAe,sBAAsB,KAAK;AACvE,YAAS,oBAAoB,WAAW,UAAU;;IAEnD;EAAC;EAAM;EAAS;EAAM;EAAqB;EAAe;EAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloating-CNaOVlhE.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 portalRef,\n offsetX = 0,\n offsetY = 6,\n strategy = 'fixed',\n scrollContainerId,\n viewportMargin = 8,\n keepInViewport = true,\n absoluteReference = 'portal',\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 let left = pos.left\n let top = pos.top\n\n if (strategy === 'absolute') {\n if (absoluteReference === 'offsetParent') {\n const op = floating.offsetParent\n if (op instanceof HTMLElement) {\n const r = op.getBoundingClientRect()\n\n left -= r.left + op.clientLeft - op.scrollLeft\n top -= r.top + op.clientTop - op.scrollTop\n }\n }\n\n if (absoluteReference === 'portal') {\n const el = portalRef?.current\n if (el) {\n const r = el.getBoundingClientRect()\n\n left -= r.left + el.clientLeft - el.scrollLeft\n top -= r.top + el.clientTop - el.scrollTop\n }\n }\n }\n\n floating.style.top = '0px'\n floating.style.left = '0px'\n floating.style.position = strategy\n floating.style.transform = `translate(${left}px, ${top}px)`\n }, [\n offsetX,\n offsetY,\n strategy,\n floatingEl,\n placement,\n targetRef,\n keepInViewport,\n viewportMargin,\n absoluteReference,\n portalRef?.current\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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"}
|
|
1
|
+
{"version":3,"file":"useFloating-CS5NHgoq.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 portalRef,\n offsetX = 0,\n offsetY = 6,\n strategy = 'fixed',\n scrollContainerId,\n viewportMargin = 8,\n keepInViewport = true,\n absoluteReference = 'portal',\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 let left = pos.left\n let top = pos.top\n\n if (strategy === 'absolute') {\n if (absoluteReference === 'offsetParent') {\n const op = floating.offsetParent\n if (op instanceof HTMLElement) {\n const r = op.getBoundingClientRect()\n\n left -= r.left + op.clientLeft - op.scrollLeft\n top -= r.top + op.clientTop - op.scrollTop\n }\n }\n\n if (absoluteReference === 'portal') {\n const el = portalRef?.current\n if (el) {\n const r = el.getBoundingClientRect()\n\n left -= r.left + el.clientLeft - el.scrollLeft\n top -= r.top + el.clientTop - el.scrollTop\n }\n }\n }\n\n floating.style.top = '0px'\n floating.style.left = '0px'\n floating.style.position = strategy\n floating.style.transform = `translate(${left}px, ${top}px)`\n }, [\n offsetX,\n offsetY,\n strategy,\n floatingEl,\n placement,\n targetRef,\n keepInViewport,\n viewportMargin,\n absoluteReference,\n portalRef?.current\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":";;;AAGA,MAAaA,sBAAsD;CACjE,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA;EACD;CACD,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACD;CACD,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACD;CACD,WAAW;EACT;EACA;EACA;EACA;EACA;EACA;EACD;CACD,KAAK;EAAC;EAAO;EAAU;EAAa;EAAW;EAAgB;EAAa;CAC5E,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;EACD;CACD,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACD;CACD,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACD;CACD,MAAM;EAAC;EAAQ;EAAS;EAAc;EAAY;EAAe;EAAY;CAC7E,QAAQ;EAAC;EAAU;EAAU;EAAO;EAAS;EAAO;CACrD;;;;ACzED,SAAS,iBAAiB,EACxB,MACA,SACA,SACA,WACA,gBACgD;CAChD,IAAI,MAAM,KAAK,MAAM;CACrB,IAAI,OAAO,KAAK,OAAO;AAEvB,SAAQ,WAAR;EACE,KAAK;AACH,SAAM,KAAK,MAAM,aAAa,SAAS;AACvC,UAAO,KAAK,OAAO,KAAK,QAAQ,IAAI,aAAa,QAAQ,IAAI;AAC7D;EAEF,KAAK;AACH,SAAM,KAAK,MAAM,aAAa,SAAS;AACvC;EAEF,KAAK;AACH,SAAM,KAAK,MAAM,aAAa,SAAS;AACvC,UAAO,KAAK,QAAQ,UAAU,aAAa;AAC3C;EAEF,KAAK;AACH,SAAM,KAAK,SAAS;AACpB,UAAO,KAAK,OAAO,KAAK,QAAQ,IAAI,aAAa,QAAQ,IAAI;AAC7D;EAEF,KAAK;AACH,SAAM,KAAK,SAAS;AACpB;EAEF,KAAK;AACH,SAAM,KAAK,SAAS;AACpB,UAAO,KAAK,QAAQ,UAAU,aAAa;AAC3C;EAEF,KAAK;AACH,SAAM,KAAK,MAAM,KAAK,SAAS,IAAI,aAAa,SAAS,IAAI;AAC7D,UAAO,KAAK,OAAO,aAAa,QAAQ;AACxC;EAEF,KAAK;AACH,UAAO,KAAK,OAAO,aAAa,QAAQ;AACxC;EAEF,KAAK;AACH,SAAM,KAAK,SAAS,aAAa,SAAS;AAC1C,UAAO,KAAK,OAAO,aAAa,QAAQ;AACxC;EAEF,KAAK;AACH,SAAM,KAAK,MAAM,KAAK,SAAS,IAAI,aAAa,SAAS,IAAI;AAC7D,UAAO,KAAK,QAAQ;AACpB;EAEF,KAAK;AACH,UAAO,KAAK,QAAQ;AACpB;EAEF,KAAK;AACH,UAAO,KAAK,QAAQ;AACpB,SAAM,KAAK,SAAS,aAAa,SAAS;AAC1C;EAEF,KAAK;AACH,UAAO,KAAK,OAAO,KAAK,QAAQ,IAAI,aAAa,QAAQ,IAAI;AAC7D,SAAM,KAAK,MAAM,KAAK,SAAS,IAAI,aAAa,SAAS,IAAI;AAC7D;;AAGJ,QAAO;EAAE;EAAK;EAAM;;AAGtB,SAAS,gBACP,KACA,MACA,cACA,QACA;CACA,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,OAAO;CAElB,MAAM,cAAc,KAAK,IACvB,KAAK,IAAI,MAAM,OAAO,EACtB,KAAK,aAAa,QAAQ,OAC3B;AAMD,QAAO;EAAE,KALU,KAAK,IACtB,KAAK,IAAI,KAAK,OAAO,EACrB,KAAK,aAAa,SAAS,OAC5B;EAEyB,MAAM;EAAa;;AAG/C,SAAS,UACP,KACA,MACA,cACA,QACA;CACA,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,OAAO;AAClB,QAAO;EACL,MAAM,OAAO;EACb,OAAO,OAAO,aAAa,QAAQ,KAAK;EACxC,KAAK,MAAM;EACX,QAAQ,MAAM,aAAa,SAAS,KAAK;EAC1C;;AAGH,SAAS,mBAAmB,GAA2B;AACrD,QAAO,oBAAoB,MAAM,CAAC,EAAE;;AAGtC,SAAgB,sBAAsB,QAQnB;CACjB,MAAM,EACJ,MACA,cACA,WACA,UAAU,GACV,UAAU,GACV,SAAS,GACT,UAAU,SACR;CAEJ,MAAM,QAAQ,UAAU,mBAAmB,UAAU,GAAG,CAAC,UAAU;AAEnE,MAAK,MAAM,KAAK,OAAO;EACrB,MAAMC,QAAM,iBAAiB;GAC3B;GACA;GACA,WAAW;GACX;GACA;GACD,CAAC;EACF,MAAM,IAAI,UAAUA,MAAI,KAAKA,MAAI,MAAM,cAAc,OAAO;AAC5D,MAAI,CAAC,EAAE,QAAQ,CAAC,EAAE,SAAS,CAAC,EAAE,OAAO,CAAC,EAAE,OACtC,QAAO;GAAE,GAAGA;GAAK,WAAW;GAAG;;CAInC,MAAM,MAAM,iBAAiB;EAC3B;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO;EAAE,GADO,gBAAgB,IAAI,KAAK,IAAI,MAAM,cAAc,OAAO;EACnD;EAAW;;;;;AClKlC,SAAS,UAAU,OAAkC;AACnD,QAAO,iBAAiB;;AAG1B,SAAgB,YACd,WACA,SACA;CACA,MAAM,EACJ,WACA,UAAU,GACV,UAAU,GACV,WAAW,SACX,mBACA,iBAAiB,GACjB,iBAAiB,MACjB,oBAAoB,UACpB,YAAY,mBACV,WAAW,EAAE;CAEjB,MAAM,CAAC,YAAY,iBAAiB,SAA6B,KAAK;CAEtE,MAAM,SAAS,kBAAkB;EAC/B,MAAM,SAAS,UAAU;EACzB,MAAM,WAAW;AACjB,MAAI,CAAC,UAAU,CAAC,SAAU;EAK1B,MAAM,MAAM,sBAAsB;GAChC,MAJW,OAAO,uBAAuB;GAKzC;GACA;GACA;GACA,cAPmB,SAAS,uBAAuB;GAQnD,SAAS;GACT,QAAQ;GACT,CAAC;EAEF,IAAI,OAAO,IAAI;EACf,IAAI,MAAM,IAAI;AAEd,MAAI,aAAa,YAAY;AAC3B,OAAI,sBAAsB,gBAAgB;IACxC,MAAM,KAAK,SAAS;AACpB,QAAI,cAAc,aAAa;KAC7B,MAAM,IAAI,GAAG,uBAAuB;AAEpC,aAAQ,EAAE,OAAO,GAAG,aAAa,GAAG;AACpC,YAAO,EAAE,MAAM,GAAG,YAAY,GAAG;;;AAIrC,OAAI,sBAAsB,UAAU;IAClC,MAAM,KAAK,WAAW;AACtB,QAAI,IAAI;KACN,MAAM,IAAI,GAAG,uBAAuB;AAEpC,aAAQ,EAAE,OAAO,GAAG,aAAa,GAAG;AACpC,YAAO,EAAE,MAAM,GAAG,YAAY,GAAG;;;;AAKvC,WAAS,MAAM,MAAM;AACrB,WAAS,MAAM,OAAO;AACtB,WAAS,MAAM,WAAW;AAC1B,WAAS,MAAM,YAAY,aAAa,KAAK,MAAM,IAAI;IACtD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACZ,CAAC;AAEF,iBAAgB;AACd,MAAI,CAAC,WAAY;EAEjB,MAAMC,kBAA+C,oBACjD,SAAS,eAAe,kBAAkB,GAC1C;AAEJ,UAAQ;EAER,MAAM,kBAAkB,sBAAsB,OAAO;AAGrD,MAAI,mBAAmB,sBAAsB,gBAC3C,iBAAgB,iBAAiB,UAAU,WAAW,EAAE,SAAS,MAAM,CAAC;AAE1E,SAAO,iBAAiB,UAAU,WAAW,EAAE,SAAS,MAAM,CAAC;EAE/D,MAAM,KAAK,IAAI,eAAe,UAAU;EAExC,MAAM,SAAS,UAAU;AAEzB,MAAI,UAAU,OAAO,CAAE,IAAG,QAAQ,OAAO;AAEzC,KAAG,QAAQ,WAAW;AAEtB,eAAa;AACX,OAAI,mBAAmB,yBAAyB,gBAC9C,iBAAgB,oBAAoB,UAAU,UAAiB;AAEjE,UAAO,oBAAoB,UAAU,UAAU;AAC/C,MAAG,YAAY;;IAEhB;EAAC;EAAY;EAAQ;EAAmB;EAAU,CAAC;CAEtD,MAAM,cAAc,aAAa,OAA2B;AAC1D,gBAAc,GAAG;IAChB,EAAE,CAAC;AAEN,QAAO,eACE;EAAE;EAAY;EAAa;EAAQ,GAC1C;EAAC;EAAY;EAAa;EAAO,CAClC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemedStyles-BJWB5BTH.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","keyframesBySlot: any","out: any"],"sources":["../src/hooks/useThemedStyles/utils/hasString.ts","../src/hooks/useThemedStyles/utils/stableStringfy.ts","../src/hooks/useThemedStyles/utils/injectSlots.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 { KeyframesMap, 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 * Prevents injecting identical keyframes multiple times.\n */\nconst KEYFRAMES_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\nexport function injectKeyframes(keyframes?: KeyframesMap) {\n if (!keyframes) return\n if (typeof document === 'undefined') return\n\n const el = ensureStyleEl()\n if (!el) return\n\n for (const [name, frames] of Object.entries(keyframes)) {\n const signature = `@keyframes:${name}:${stableStringify(frames)}`\n const key = hashStr(signature)\n if (KEYFRAMES_CACHE.has(key)) continue\n\n const body = Object.entries(frames)\n .map(([step, decl]) => `${step}{${declToCss(decl as any)}}`)\n .join('')\n\n el.appendChild(document.createTextNode(`\\n@keyframes ${name}{${body}}\\n`))\n KEYFRAMES_CACHE.add(key)\n }\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 semibold: 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 semibold: 600,\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 * A keyframe step is like CSSProperties, but also supports CSS variables.\n * Used inside `__rules`.\n */\nexport type KeyframeStep = React.CSSProperties &\n Record<`--${string}`, string | number>\n\n/**\n * Map of selectors to keyframes.\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 KeyframesMap = Record<string, Record<string, KeyframeStep>>\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 __keyframes?: KeyframesMap\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 * Extracted keyframe maps by slot.\n */\n keyframesBySlot: Partial<Record<keyof TStyles, KeyframesMap>>\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","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Types\nimport type { SplitResult, StyleMap } from '../types'\n\n/**\n * Splits the style map into:\n * - `inline`: slot styles without `__rules` / `__keyframes`\n * - `rulesBySlot`: extracted `__rules` grouped by slot\n * - `keyframesBySlot`: extracted `__keyframes` grouped by slot\n *\n * This lets us:\n * - apply inline styles directly via `style={...}`\n * - inject selectors/pseudos via generated CSS classes\n * - inject keyframes via runtime <style> tag\n */\nexport function splitRules<TStyles extends StyleMap>(\n styles: TStyles\n): SplitResult<TStyles> {\n const inline: any = {}\n const rulesBySlot: any = {}\n const keyframesBySlot: any = {}\n\n for (const key in styles) {\n const slot = styles[key]\n if (!slot) continue\n\n const { __rules, __keyframes, ...rest } = slot as any\n\n inline[key] = rest\n\n if (__rules && Object.keys(__rules).length > 0) {\n rulesBySlot[key] = __rules\n }\n\n if (__keyframes && Object.keys(__keyframes).length > 0) {\n keyframesBySlot[key] = __keyframes\n }\n }\n\n return { inline, rulesBySlot, keyframesBySlot } as SplitResult<TStyles>\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 injectKeyframes\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, keyframesBySlot } = useMemo(\n () => splitRules(raw),\n [raw]\n )\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(keyframesBySlot as any)) {\n injectKeyframes((keyframesBySlot as any)[slotKey])\n }\n\n // depois injeta regras por slot\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 }, [keyframesBySlot, rulesBySlot, classes])\n\n return { styles: withCommons as any, classes }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useThemedStyles-B1E0m8Ih.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","keyframesBySlot: any","out: any"],"sources":["../src/hooks/useThemedStyles/utils/hasString.ts","../src/hooks/useThemedStyles/utils/stableStringfy.ts","../src/hooks/useThemedStyles/utils/injectSlots.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 { KeyframesMap, 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 * Prevents injecting identical keyframes multiple times.\n */\nconst KEYFRAMES_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\nexport function injectKeyframes(keyframes?: KeyframesMap) {\n if (!keyframes) return\n if (typeof document === 'undefined') return\n\n const el = ensureStyleEl()\n if (!el) return\n\n for (const [name, frames] of Object.entries(keyframes)) {\n const signature = `@keyframes:${name}:${stableStringify(frames)}`\n const key = hashStr(signature)\n if (KEYFRAMES_CACHE.has(key)) continue\n\n const body = Object.entries(frames)\n .map(([step, decl]) => `${step}{${declToCss(decl as any)}}`)\n .join('')\n\n el.appendChild(document.createTextNode(`\\n@keyframes ${name}{${body}}\\n`))\n KEYFRAMES_CACHE.add(key)\n }\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 semibold: 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 semibold: 600,\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 * A keyframe step is like CSSProperties, but also supports CSS variables.\n * Used inside `__rules`.\n */\nexport type KeyframeStep = React.CSSProperties &\n Record<`--${string}`, string | number>\n\n/**\n * Map of selectors to keyframes.\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 KeyframesMap = Record<string, Record<string, KeyframeStep>>\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 __keyframes?: KeyframesMap\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 * Extracted keyframe maps by slot.\n */\n keyframesBySlot: Partial<Record<keyof TStyles, KeyframesMap>>\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","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Types\nimport type { SplitResult, StyleMap } from '../types'\n\n/**\n * Splits the style map into:\n * - `inline`: slot styles without `__rules` / `__keyframes`\n * - `rulesBySlot`: extracted `__rules` grouped by slot\n * - `keyframesBySlot`: extracted `__keyframes` grouped by slot\n *\n * This lets us:\n * - apply inline styles directly via `style={...}`\n * - inject selectors/pseudos via generated CSS classes\n * - inject keyframes via runtime <style> tag\n */\nexport function splitRules<TStyles extends StyleMap>(\n styles: TStyles\n): SplitResult<TStyles> {\n const inline: any = {}\n const rulesBySlot: any = {}\n const keyframesBySlot: any = {}\n\n for (const key in styles) {\n const slot = styles[key]\n if (!slot) continue\n\n const { __rules, __keyframes, ...rest } = slot as any\n\n inline[key] = rest\n\n if (__rules && Object.keys(__rules).length > 0) {\n rulesBySlot[key] = __rules\n }\n\n if (__keyframes && Object.keys(__keyframes).length > 0) {\n keyframesBySlot[key] = __keyframes\n }\n }\n\n return { inline, rulesBySlot, keyframesBySlot } as SplitResult<TStyles>\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 injectKeyframes\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, keyframesBySlot } = useMemo(\n () => splitRules(raw),\n [raw]\n )\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(keyframesBySlot as any)) {\n injectKeyframes((keyframesBySlot as any)[slotKey])\n }\n\n // depois injeta regras por slot\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 }, [keyframesBySlot, rulesBySlot, classes])\n\n return { styles: withCommons as any, classes }\n}\n"],"mappings":";;;;;;;AAIA,SAAgB,QAAQ,KAAa;CACnC,IAAI,IAAI;AACR,MAAK,IAAI,IAAI,GAAG,IAAI,IAAI,QAAQ,IAAK,KAAK,IAAI,KAAM,IAAI,WAAW,EAAE;AACrE,SAAQ,MAAM,GAAG,SAAS,GAAG;;;;;;;;;ACH/B,SAAgB,gBAAgB,KAAkB;AAChD,KAAI,OAAO,QAAQ,OAAO,QAAQ,SAAU,QAAO,OAAO,IAAI;AAC9D,KAAI,MAAM,QAAQ,IAAI,CAAE,QAAO,IAAI,IAAI,IAAI,gBAAgB,CAAC,KAAK,IAAI,CAAC;AAEtE,QAAO,IADM,OAAO,KAAK,IAAI,CAAC,MAAM,CACpB,KAAI,MAAK,GAAG,EAAE,GAAG,gBAAgB,IAAI,GAAG,GAAG,CAAC,KAAK,IAAI,CAAC;;;;;;;;;ACIxE,MAAM,WAAW;;;;AAKjB,MAAM,wBAAQ,IAAI,KAAa;;;;AAK/B,MAAM,kCAAkB,IAAI,KAAa;;;;AAKzC,SAAS,gBAAyC;AAChD,KAAI,OAAO,aAAa,YAAa,QAAO;CAC5C,IAAI,KAAK,SAAS,eAAe,SAAS;AAC1C,KAAI,CAAC,IAAI;AACP,OAAK,SAAS,cAAc,QAAQ;AACpC,KAAG,KAAK;AACR,WAAS,KAAK,YAAY,GAAG;;AAE/B,QAAO;;;;;;;;;;AAWT,MAAM,WAAW,IAAI,IAAI;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;;;;;AAMF,SAAS,QAAQ,MAAc;AAC7B,KAAI,KAAK,WAAW,KAAK,CAAE,QAAO;AAClC,QAAO,KAAK,QAAQ,WAAU,MAAK,IAAI,EAAE,aAAa,GAAG;;;;;;;;;AAU3D,SAAS,WAAW,MAAc,OAAY;AAC5C,KAAI,SAAS,KAAM,QAAO;AAC1B,KAAI,OAAO,UAAU,YAAY,CAAC,SAAS,IAAI,KAAK,CAAE,QAAO,GAAG,MAAM;AACtE,QAAO,OAAO,MAAM;;;;;;;;;AAUtB,SAAS,UAAU,MAA2B;CAC5C,MAAMA,QAAkB,EAAE;AAC1B,MAAK,MAAM,CAAC,GAAG,MAAM,OAAO,QAAQ,KAAK,EAAE;EACzC,MAAM,WAAW,WAAW,GAAG,EAAE;AACjC,MAAI,YAAY,KAAM;AACtB,QAAM,KAAK,GAAG,QAAQ,EAAE,CAAC,GAAG,SAAS,GAAG;;AAE1C,QAAO,MAAM,KAAK,GAAG;;;;;;;;;;AAWvB,SAAS,cAAc,UAAkB,WAAmB;CAC1D,MAAM,OAAO,IAAI;AAEjB,KAAI,SAAS,SAAS,IAAI,CAAE,QAAO,SAAS,WAAW,KAAK,KAAK;AACjE,KAAI,SAAS,WAAW,IAAI,CAAE,QAAO,GAAG,OAAO;AAC/C,QAAO,GAAG,KAAK,GAAG;;;;;;;AAQpB,SAAgB,gBAAgB,WAAmB,OAAiB;AAClE,KAAI,CAAC,SAAS,OAAO,KAAK,MAAM,CAAC,WAAW,EAAG;AAE/C,KAAI,OAAO,aAAa,YAAa;CAGrC,MAAM,MAAM,QADM,GAAG,UAAU,GAAG,gBAAgB,MAAM,GAC1B;AAC9B,KAAI,MAAM,IAAI,IAAI,CAAE;CAEpB,MAAM,MAAM,OAAO,QAAQ,MAAM,CAC9B,KACE,CAAC,KAAK,UAAU,GAAG,cAAc,KAAK,UAAU,CAAC,GAAG,UAAU,KAAK,CAAC,GACtE,CACA,KAAK,KAAK;CAEb,MAAM,KAAK,eAAe;AAC1B,KAAI,CAAC,GAAI;AAET,IAAG,YAAY,SAAS,eAAe,KAAK,IAAI,IAAI,CAAC;AACrD,OAAM,IAAI,IAAI;;AAGhB,SAAgB,gBAAgB,WAA0B;AACxD,KAAI,CAAC,UAAW;AAChB,KAAI,OAAO,aAAa,YAAa;CAErC,MAAM,KAAK,eAAe;AAC1B,KAAI,CAAC,GAAI;AAET,MAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,UAAU,EAAE;EAEtD,MAAM,MAAM,QADM,cAAc,KAAK,GAAG,gBAAgB,OAAO,GACjC;AAC9B,MAAI,gBAAgB,IAAI,IAAI,CAAE;EAE9B,MAAM,OAAO,OAAO,QAAQ,OAAO,CAChC,KAAK,CAAC,MAAM,UAAU,GAAG,KAAK,GAAG,UAAU,KAAY,CAAC,GAAG,CAC3D,KAAK,GAAG;AAEX,KAAG,YAAY,SAAS,eAAe,gBAAgB,KAAK,GAAG,KAAK,KAAK,CAAC;AAC1E,kBAAgB,IAAI,IAAI;;;;;;ACrJ5B,SAAgB,eAGd,MAAS,UAAiB;AAC1B,KAAI,CAAC,SAAU,QAAO;CACtB,MAAM,MAAM,EAAE,GAAG,MAAM;AAEvB,MAAK,MAAM,OAAO,SAChB,KAAI,OAAO;EAAE,GAAI,KAAK,QAAQ,EAAE;EAAG,GAAI,SAAS,QAAQ,EAAE;EAAG;AAG/D,QAAO;;;;;ACmCT,MAAaC,UAAuB;CAClC,OAAO;CACP,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;CACN,OAAO;CACR;;;;;;;AC2MD,MAAa,UAA+C,WAAc;;;;;AClQ1E,SAAS,MAAM,GAAgC;AAC7C,QAAO,OAAO,MAAM,WAAW,GAAG,EAAE,OAAO;;;;;;AAO7C,MAAMC,aAGF;CAEF,IAAI,GAAG,MAAM;AACX,IAAE,SAAS,MAAM,EAAE;;CAErB,KAAK,GAAG,MAAM;AACZ,IAAE,aAAa,MAAM,EAAE;AACvB,IAAE,cAAc,MAAM,EAAE;;CAE1B,KAAK,GAAG,MAAM;AACZ,IAAE,YAAY,MAAM,EAAE;AACtB,IAAE,eAAe,MAAM,EAAE;;CAE3B,KAAK,GAAG,MAAM;AACZ,IAAE,YAAY,MAAM,EAAE;;CAExB,KAAK,GAAG,MAAM;AACZ,IAAE,cAAc,MAAM,EAAE;;CAE1B,KAAK,GAAG,MAAM;AACZ,IAAE,eAAe,MAAM,EAAE;;CAE3B,KAAK,GAAG,MAAM;AACZ,IAAE,aAAa,MAAM,EAAE;;CAIzB,IAAI,GAAG,MAAM;AACX,IAAE,UAAU,MAAM,EAAE;;CAEtB,KAAK,GAAG,MAAM;AACZ,IAAE,cAAc,MAAM,EAAE;AACxB,IAAE,eAAe,MAAM,EAAE;;CAE3B,KAAK,GAAG,MAAM;AACZ,IAAE,aAAa,MAAM,EAAE;AACvB,IAAE,gBAAgB,MAAM,EAAE;;CAE5B,KAAK,GAAG,MAAM;AACZ,IAAE,aAAa,MAAM,EAAE;;CAEzB,KAAK,GAAG,MAAM;AACZ,IAAE,eAAe,MAAM,EAAE;;CAE3B,KAAK,GAAG,MAAM;AACZ,IAAE,gBAAgB,MAAM,EAAE;;CAE5B,KAAK,GAAG,MAAM;AACZ,IAAE,cAAc,MAAM,EAAE;;CAI1B,WAAW,GAAG,MAAM;AAClB,IAAE,WAAW,MAAM,EAAE;;CAEvB,aAAa,GAAG,MAAM;AACpB,IAAE,aAAa,KAAK,UAAU,QAAQ,KAA6B;;CAErE,aAAa,GAAG,MAAM;AACpB,IAAE,aAAa,MAAM,EAAE;;CAEzB,YAAY,GAAG,MAAM;AACnB,IAAE,YAAY;;CAIhB,IAAI,GAAG,MAAM;AACX,IAAE,QAAQ,MAAM,EAAE;;CAEpB,IAAI,GAAG,MAAM;AACX,IAAE,SAAS,MAAM,EAAE;;CAErB,OAAO,GAAG,MAAM;AACd,IAAE,WAAW,MAAM,EAAE;;CAEvB,OAAO,GAAG,MAAM;AACd,IAAE,WAAW,MAAM,EAAE;;CAEvB,OAAO,GAAG,MAAM;AACd,IAAE,YAAY,MAAM,EAAE;;CAExB,OAAO,GAAG,MAAM;AACd,IAAE,YAAY,MAAM,EAAE;;CAEzB;AAED,MAAa,cAAc,OAAO,KAAK,WAAW;AAIlD,SAAgB,uBAAuB,OAAkC;AACvE,MAAK,MAAM,KAAK,YACd,KAAI,MAAM,MAAM,KAAM,QAAO;AAE/B,QAAO;;AAGT,SAAgB,wBACd,OACqB;CACrB,MAAMC,MAA2B,EAAE;AAEnC,MAAK,MAAM,KAAK,aAAa;EAC3B,MAAM,QAAQ,MAAM;AACpB,MAAI,SAAS,KAAM,YAAW,GAAG,OAAO,IAAI;;AAG9C,QAAO;;;;;;AAOT,SAAgB,qBACd,QACA,OACA,cACS;AACT,KAAI,CAAC,uBAAuB,MAAM,CAAE,QAAO;CAE3C,MAAM,OAAO,OAAO,KAAK,OAAO;AAChC,KAAI,KAAK,WAAW,EAAG,QAAO;CAE9B,MAAM,OACJ,iBACE,eAAe,SAAS,cAAc,KAAK;CAE/C,MAAM,SAAS,wBAAwB,MAAM;AAE7C,QAAO;EACL,GAAG;GACF,OAAO;GAAE,GAAI,OAAO,SAAS,EAAE;GAAG,GAAG;GAAQ;EAC/C;;;;;;;;;;;;;;;;ACrIH,SAAgB,WACd,QACsB;CACtB,MAAMC,SAAc,EAAE;CACtB,MAAMC,cAAmB,EAAE;CAC3B,MAAMC,kBAAuB,EAAE;AAE/B,MAAK,MAAM,OAAO,QAAQ;EACxB,MAAM,OAAO,OAAO;AACpB,MAAI,CAAC,KAAM;EAEX,MAAM,EAAE,SAAS,aAAa,GAAG,SAAS;AAE1C,SAAO,OAAO;AAEd,MAAI,WAAW,OAAO,KAAK,QAAQ,CAAC,SAAS,EAC3C,aAAY,OAAO;AAGrB,MAAI,eAAe,OAAO,KAAK,YAAY,CAAC,SAAS,EACnD,iBAAgB,OAAO;;AAI3B,QAAO;EAAE;EAAQ;EAAa;EAAiB;;;;;AClCjD,MAAM,iBAAiB,IAAI,IAAY,YAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8CxE,SAAgB,gBACd,OACA,SACA,SAIA;CAWA,MAAM,MAAM,cAAc,QAAQ,MAAM,EAAE,CAAC,SAAS,GAHlD,SAAS,SAAS,SAAS,OAAO,QAAQ,KAAK,MAAM,GAAG,CAAC,MAAM,EAGF,CAAC;CAEhE,MAAM,EAAE,QAAQ,aAAa,oBAAoB,cACzC,WAAW,IAAI,EACrB,CAAC,IAAI,CACN;;;;;;CAoBD,MAAM,SAAS,cACP;AACJ,SAAO,eACL,QACA,SAAS,SACV;IAGH,CAAC,QAnBiB,cACZ,gBAAgB,SAAS,YAAY,EAAE,CAAC,EAE9C,CAAC,SAAS,SAAS,CACpB,CAesB,CACtB;;;;CAKD,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,SAAS,iBAAkB,QAAO;AACvC,SAAO,qBAAqB,QAAe,OAAc,QAAQ,WAAW;IAC3E;EAAC;EAAQ;EAAO,SAAS;EAAkB,SAAS;EAAW,CAAC;;;;;CAMnE,MAAM,SAAS,cAAc;EAE3B,MAAM,MAAM,QADA,gBAAgB,YAAY,CAChB;AACxB,SAAO,SAAS,YAAY,OAAO,QAAQ,UAAU,GAAG,QAAQ,OAAO;IACtE,CAAC,aAAa,SAAS,UAAU,CAAC;;;;;;;;;;;CAYrC,MAAM,UAAU,cAAc;EAC5B,MAAMC,MAAW,EAAE;AACnB,OAAK,MAAM,WAAW,OAAO,KAAK,OAAO,CACvC,KAAI,WAAW,GAAG,OAAO,IAAI;AAE/B,SAAO;IACN,CAAC,QAAQ,OAAO,CAAC;;;;;;;AAQpB,0BAAyB;AACvB,OAAK,MAAM,WAAW,OAAO,KAAK,gBAAuB,CACvD,iBAAiB,gBAAwB,SAAS;AAIpD,OAAK,MAAM,WAAW,OAAO,KAAK,YAAmB,EAAE;GACrD,MAAM,QAAS,YAAoB;AACnC,OAAI,CAAC,MAAO;AACZ,mBAAiB,QAAgB,UAAU,MAAM;;IAElD;EAAC;EAAiB;EAAa;EAAQ,CAAC;AAE3C,QAAO;EAAE,QAAQ;EAAoB;EAAS"}
|
|
@@ -107,4 +107,4 @@ type TypeStyles<TFactory extends StylesFactoryAny> = Partial<{ [K in keyof Retur
|
|
|
107
107
|
type StylesOf<T extends (...args: any) => any> = Partial<ReturnType<T>>;
|
|
108
108
|
//#endregion
|
|
109
109
|
export { TypeStyles as i, StyleMap as n, StylesOf as r, SlotStyle as t };
|
|
110
|
-
//# sourceMappingURL=useThemedStyles-
|
|
110
|
+
//# sourceMappingURL=useThemedStyles-BVQKnv5r.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "softable-pixels-web",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.10",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "softable",
|
|
@@ -126,23 +126,27 @@
|
|
|
126
126
|
"./color-picker": {
|
|
127
127
|
"types": "./dist/color-picker.d.ts",
|
|
128
128
|
"import": "./dist/color-picker.js"
|
|
129
|
+
},
|
|
130
|
+
"./date-picker": {
|
|
131
|
+
"types": "./dist/date-picker.d.ts",
|
|
132
|
+
"import": "./dist/date-picker.js"
|
|
129
133
|
}
|
|
130
134
|
},
|
|
131
135
|
"peerDependencies": {
|
|
132
|
-
"
|
|
136
|
+
"framer-motion": "^11.0.3",
|
|
133
137
|
"radix-ui": "^1.4.3",
|
|
134
|
-
"react
|
|
135
|
-
"
|
|
138
|
+
"react": "^18.2.0",
|
|
139
|
+
"react-dom": "^18.2.0"
|
|
136
140
|
},
|
|
137
141
|
"devDependencies": {
|
|
138
142
|
"@biomejs/biome": "2.0.6",
|
|
139
143
|
"@svgr/cli": "^8.1.0",
|
|
140
|
-
"radix-ui": "^1.4.3",
|
|
141
144
|
"@svgr/webpack": "^8.1.0",
|
|
142
145
|
"@types/node": "^18.18.3",
|
|
143
146
|
"@types/react": "^19.2.7",
|
|
144
147
|
"@types/react-dom": "^19.2.3",
|
|
145
148
|
"framer-motion": "^11.0.3",
|
|
149
|
+
"radix-ui": "^1.4.3",
|
|
146
150
|
"tsdown": "^0.18.3",
|
|
147
151
|
"typescript": "^5.9.3"
|
|
148
152
|
},
|
|
@@ -207,8 +211,14 @@
|
|
|
207
211
|
],
|
|
208
212
|
"base-popover": [
|
|
209
213
|
"dist/base-popover/index.d.ts"
|
|
214
|
+
],
|
|
215
|
+
"date-picker": [
|
|
216
|
+
"dist/date-picker/index.d.ts"
|
|
210
217
|
]
|
|
211
218
|
}
|
|
212
219
|
},
|
|
213
|
-
"packageManager": "pnpm@10.18.3"
|
|
220
|
+
"packageManager": "pnpm@10.18.3",
|
|
221
|
+
"dependencies": {
|
|
222
|
+
"date-fns": "^4.1.0"
|
|
223
|
+
}
|
|
214
224
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Icon-C_yI8e6Z.js","names":["ICON_SIZE_MAP: Record<string, CSSProperties>","IconLoaders"],"sources":["../src/assets/icons/__generated__/general/check.tsx","../src/assets/icons/__generated__/chevrons/down.tsx","../src/assets/icons/__generated__/general/eye.tsx","../src/assets/icons/__generated__/general/eye-off.tsx","../src/assets/icons/__generated__/brands/facebook.tsx","../src/assets/icons/__generated__/brands/facebook-fit.tsx","../src/assets/icons/__generated__/brands/google.tsx","../src/assets/icons/__generated__/general/search.tsx","../src/assets/icons/__generated__/chevrons/up.tsx","../src/assets/icons/index.tsx","../src/components/commons/toolkit/Icon/constants.ts","../src/components/commons/toolkit/Icon/style.ts","../src/components/commons/toolkit/Icon/index.tsx"],"sourcesContent":["// Auto-generated from general/check.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type CheckProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Check = ({ title, ...props }: CheckProps) => (\n<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}>\n <title>{title ?? 'check'}</title><polyline points=\"20 6 9 17 4 12\"></polyline></svg>\n)\n","// Auto-generated from chevrons/down.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type DownProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Down = ({ title, ...props }: DownProps) => (\n<svg viewBox=\"0 0 16 16\" fill=\"none\" {...props}>\n<path d=\"M4 6L8 10L12 6\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n <title>{title ?? 'down'}</title>\n</svg>\n)\n","// Auto-generated from general/eye.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type EyeProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Eye = ({ title, ...props }: EyeProps) => (\n<svg viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n<path d=\"M2.42012 12.7132C2.28394 12.4975 2.21584 12.3897 2.17772 12.2234C2.14909 12.0985 2.14909 11.9015 2.17772 11.7766C2.21584 11.6103 2.28394 11.5025 2.42012 11.2868C3.54553 9.50484 6.8954 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7766C21.8517 11.9015 21.8517 12.0985 21.8231 12.2234C21.785 12.3897 21.7169 12.4975 21.5807 12.7132C20.4553 14.4952 17.1054 19 12.0004 19C6.8954 19 3.54553 14.4952 2.42012 12.7132Z\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n <title>{title ?? 'eye'}</title>\n<path d=\"M12.0004 15C13.6573 15 15.0004 13.6569 15.0004 12C15.0004 10.3431 13.6573 9 12.0004 9C10.3435 9 9.0004 10.3431 9.0004 12C9.0004 13.6569 10.3435 15 12.0004 15Z\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n</svg>\n)\n","// Auto-generated from general/eye-off.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type EyeOffProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const EyeOff = ({ title, ...props }: EyeOffProps) => (\n<svg viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n<path d=\"M10.7429 5.09232C11.1494 5.03223 11.5686 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7767C21.8518 11.9016 21.8517 12.0987 21.8231 12.2236C21.7849 12.3899 21.7164 12.4985 21.5792 12.7156C21.2793 13.1901 20.8222 13.8571 20.2165 14.5805M6.72432 6.71504C4.56225 8.1817 3.09445 10.2194 2.42111 11.2853C2.28428 11.5019 2.21587 11.6102 2.17774 11.7765C2.1491 11.9014 2.14909 12.0984 2.17771 12.2234C2.21583 12.3897 2.28393 12.4975 2.42013 12.7132C3.54554 14.4952 6.89541 19 12.0004 19C14.0588 19 15.8319 18.2676 17.2888 17.2766M3.00042 3L21.0004 21M9.8791 9.87868C9.3362 10.4216 9.00042 11.1716 9.00042 12C9.00042 13.6569 10.3436 15 12.0004 15C12.8288 15 13.5788 14.6642 14.1217 14.1213\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n <title>{title ?? 'eye-off'}</title>\n</svg>\n)\n","// Auto-generated from brands/facebook.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type FacebookProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Facebook = ({ title, ...props }: FacebookProps) => (\n<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" {...props}>\n<path d=\"M16 8C16 11.9927 13.0707 15.3027 9.24667 15.9033V10.328H11.106L11.46 8.02133H9.24667V6.52467C9.24667 5.89333 9.556 5.27867 10.5467 5.27867H11.5527V3.31467C11.5527 3.31467 10.6393 3.15867 9.76667 3.15867C7.944 3.15867 6.75333 4.26333 6.75333 6.26267V8.02067H4.72733V10.3273H6.75333V15.9027C2.93 15.3013 0 11.992 0 8C0 3.582 3.582 0 8 0C12.418 0 16 3.58133 16 8Z\" fill=\"currentColor\"/>\n <title>{title ?? 'facebook'}</title>\n</svg>\n)\n","// Auto-generated from brands/facebook-fit.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type FacebookFitProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const FacebookFit = ({ title, ...props }: FacebookFitProps) => (\n<svg viewBox=\"0 0 1024 1024\" id=\"facebook\" {...props}>\n <path fill=\"#1877f2\" d=\"M1024,512C1024,229.23016,794.76978,0,512,0S0,229.23016,0,512c0,255.554,187.231,467.37012,432,505.77777V660H302V512H432V399.2C432,270.87982,508.43854,200,625.38922,200,681.40765,200,740,210,740,210V336H675.43713C611.83508,336,592,375.46667,592,415.95728V512H734L711.3,660H592v357.77777C836.769,979.37012,1024,767.554,1024,512Z\"></path>\n <title>{title ?? 'facebook-fit'}</title>\n <path fill=\"#fff\" d=\"M711.3,660,734,512H592V415.95728C592,375.46667,611.83508,336,675.43713,336H740V210s-58.59235-10-114.61078-10C508.43854,200,432,270.87982,432,399.2V512H302V660H432v357.77777a517.39619,517.39619,0,0,0,160,0V660Z\"></path>\n</svg>\n)\n","// Auto-generated from brands/google.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type GoogleProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Google = ({ title, ...props }: GoogleProps) => (\n<svg width=\"800px\" height=\"800px\" viewBox=\"-3 0 262 262\" version=\"1.1\" preserveAspectRatio=\"xMidYMid\" {...props}>\n\t<g>\n\t\t<path d=\"M255.878,133.451 C255.878,122.717 255.007,114.884 253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 255.878,133.451\" fill=\"#4285F4\"></path>\n <title>{title ?? 'google'}</title>\n\t\t<path d=\"M130.55,261.1 C165.798,261.1 195.389,249.495 217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1\" fill=\"#34A853\"></path>\n\t\t<path d=\"M56.281,156.37 C53.525,148.247 51.93,139.543 51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 5.077,171.455 13.925,189.152 L56.281,156.37\" fill=\"#FBBC05\"></path>\n\t\t<path d=\"M130.55,50.479 C155.064,50.479 171.6,61.068 181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 130.55,50.479\" fill=\"#EB4335\"></path>\n\t</g>\n</svg>\n)\n","// Auto-generated from general/search.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type SearchProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Search = ({ title, ...props }: SearchProps) => (\n<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n<path d=\"M21 21L17.5001 17.5M20 11.5C20 16.1944 16.1944 20 11.5 20C6.80558 20 3 16.1944 3 11.5C3 6.80558 6.80558 3 11.5 3C16.1944 3 20 6.80558 20 11.5Z\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n <title>{title ?? 'search'}</title>\n</svg>\n)\n","// Auto-generated from chevrons/up.svg. Do not edit manually.\n\n// External Libraries\nimport type { SVGProps } from 'react'\n\nexport type UpProps = SVGProps<SVGSVGElement> & { title?: string }\n\nexport const Up = ({ title, ...props }: UpProps) => (\n<svg viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n<path d=\"M18 15L12 9L6 15\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n <title>{title ?? 'up'}</title>\n</svg>\n)\n","// Auto-generated by generate-icon-components.sh. Do not edit manually.\n/** biome-ignore-all lint/suspicious/noShadowRestrictedNames: generated */\n\nimport { Check } from './__generated__/general/check'\nimport { Down } from './__generated__/chevrons/down'\nimport { Eye } from './__generated__/general/eye'\nimport { EyeOff } from './__generated__/general/eye-off'\nimport { Facebook } from './__generated__/brands/facebook'\nimport { FacebookFit } from './__generated__/brands/facebook-fit'\nimport { Google } from './__generated__/brands/google'\nimport { Search } from './__generated__/general/search'\nimport { Up } from './__generated__/chevrons/up'\n\nconst icons = {\n 'brands-facebook': <Facebook />,\n 'brands-facebook-fit': <FacebookFit />,\n 'brands-google': <Google />,\n 'chevrons-down': <Down />,\n 'chevrons-up': <Up />,\n 'general-check': <Check />,\n 'general-eye': <Eye />,\n 'general-eye-off': <EyeOff />,\n 'general-search': <Search />,\n}\n\nexport type IconName = keyof typeof icons\nexport default icons\n","// External Libraries\nimport type { CSSProperties } from \"react\";\n\nexport const ICON_SIZE_MAP: Record<string, CSSProperties> = {\n xs: {\n width: '0.75rem',\n height: '0.75rem'\n },\n sm: {\n width: '1rem',\n height: '1rem'\n },\n md: {\n width: '1.25rem',\n height: '1.25rem'\n },\n lg: {\n width: '1.5rem',\n height: '1.5rem'\n },\n xl: {\n width: '1.75rem',\n height: '1.75rem'\n },\n '2xl': {\n width: '2rem',\n height: '2rem'\n },\n '3xl': {\n width: '2.5rem',\n height: '2.5rem'\n }\n} as const","// Types\nimport type { IconProps } from './types'\n\n// Utils\nimport { ICON_SIZE_MAP } from './constants'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createIconStyles(props: IconProps) {\n const { color, size = 'md' } = props\n\n return styled({\n container: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n color:\n color === 'primary'\n ? 'var(--px-text-primary)'\n : color === 'secondary'\n ? 'var(--px-text-secondary)'\n : color,\n ...(ICON_SIZE_MAP[size] as any),\n __rules: {\n '& > svg': { width: '100%', height: '100%' }\n }\n }\n })\n}\n","// External Libraries\nimport { useMemo } from 'react'\n\n// Components\nimport IconLoaders from '@assets/icons'\n\n// Types\nimport type { IconProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createIconStyles } from './style'\n\nexport const Icon = (props: IconProps) => {\n const { name } = props\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createIconStyles, {\n pick: p => [p.color, p.size],\n override: props.styles,\n applyCommonProps: true\n })\n\n // Constants\n const IconComponent = useMemo(() => {\n const loader = IconLoaders[name]\n return loader as unknown as React.ReactNode\n }, [name])\n\n if (!IconComponent) {\n console.warn(`Icon \"${name}\" not found.`)\n return null\n }\n\n return (\n <span className={classes.container} style={styles.container}>\n {IconComponent}\n </span>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popover-DGYahpRI.js","names":["node: HTMLElement | null","Popover: React.FC<PopoverProps>"],"sources":["../src/components/commons/toolkit/Popover/hooks/usePortalContainer/index.ts","../src/components/commons/toolkit/Popover/utils/focusNextFrom.ts","../src/components/commons/toolkit/Popover/utils/portal.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverA11yFocus/index.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverFloatingOptions/index.ts","../src/components/commons/toolkit/Popover/styles.ts","../src/components/commons/toolkit/Popover/types.ts","../src/components/commons/toolkit/Popover/index.tsx"],"sourcesContent":["// External Libraries\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nexport function usePortalContainer(portalId?: string) {\n const portalRef = useRef<HTMLElement | null>(null)\n const [portalEl, setPortalEl] = useState<HTMLElement | null>(null)\n\n useEffect(() => {\n if (typeof document === 'undefined') return\n\n if (!portalId) {\n setPortalEl(null)\n return\n }\n\n const found = document.getElementById(portalId) as HTMLElement | null\n setPortalEl(found)\n if (found) return\n\n const obs = new MutationObserver(() => {\n const el = document.getElementById(portalId) as HTMLElement | null\n if (el) {\n setPortalEl(el)\n obs.disconnect()\n }\n })\n\n obs.observe(document.documentElement, { childList: true, subtree: true })\n return () => obs.disconnect()\n }, [portalId])\n\n useEffect(() => {\n portalRef.current = portalEl\n }, [portalEl])\n\n const portalContainer = useMemo(() => {\n if (typeof document === 'undefined') return null\n return portalEl ?? document.body\n }, [portalEl])\n\n return { portalRef, portalEl, portalContainer }\n}\n","const SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n '[contenteditable=\"true\"]'\n].join(',')\n\nfunction isVisible(el: HTMLElement) {\n const style = window.getComputedStyle(el)\n if (style.display === 'none' || style.visibility === 'hidden') return false\n const r = el.getBoundingClientRect()\n return r.width > 0 && r.height > 0\n}\n\nexport function focusNextFrom(from: HTMLElement, root: ParentNode = document) {\n const list = Array.from(root.querySelectorAll<HTMLElement>(SELECTOR)).filter(\n isVisible\n )\n\n const i = list.indexOf(from)\n const next = i >= 0 ? list[i + 1] : list[0]\n next?.focus?.()\n return next ?? null\n}\n","export function resolvePortalContainer(portalId?: string): HTMLElement | null {\n if (typeof document === 'undefined') return null\n if (!portalId) return document.body\n return document.getElementById(portalId) ?? document.body\n}\n\nexport function createsFixedContainingBlock(el: HTMLElement): boolean {\n let node: HTMLElement | null = el\n while (node) {\n const s = getComputedStyle(node)\n if (\n s.transform !== 'none' ||\n s.translate !== 'none' ||\n s.perspective !== 'none' ||\n s.filter !== 'none' ||\n s.backdropFilter !== 'none' ||\n s.contain.includes('paint')\n ) {\n return true\n }\n node = node.parentElement\n }\n return false\n}\n","// External Libraries\nimport { useEffect, useRef } from 'react'\n\n// Utils\nimport { focusNextFrom } from '../../utils'\n\n// Types\nimport type { CloseReason } from '../../types'\n\ntype Params = {\n open: boolean\n restoreFocusOnClose: boolean\n triggerRef: React.RefObject<HTMLElement | null>\n lastCloseReasonRef: React.MutableRefObject<CloseReason>\n setOpen: (v: boolean) => void\n}\n\nexport function usePopoverA11yFocus({\n open,\n restoreFocusOnClose,\n triggerRef,\n lastCloseReasonRef,\n setOpen\n}: Params) {\n const tabFocusFromRef = useRef<HTMLElement | null>(null)\n const prevOpenRef = useRef<boolean>(open)\n\n useEffect(() => {\n if (!open) return\n if (typeof document === 'undefined') return\n\n const onKeyDownCapture = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return\n lastCloseReasonRef.current = 'tab'\n tabFocusFromRef.current = triggerRef.current\n setOpen(false)\n }\n\n document.addEventListener('keydown', onKeyDownCapture, true)\n return () => document.removeEventListener('keydown', onKeyDownCapture, true)\n }, [open, setOpen, triggerRef, lastCloseReasonRef])\n\n useEffect(() => {\n const wasOpen = prevOpenRef.current\n prevOpenRef.current = open\n\n if (open) return\n if (!wasOpen) return\n\n if (!restoreFocusOnClose) return\n\n const reason = lastCloseReasonRef.current\n\n if (reason === 'tab') {\n const from = tabFocusFromRef.current\n tabFocusFromRef.current = null\n lastCloseReasonRef.current = 'programmatic'\n\n if (from) {\n requestAnimationFrame(() => {\n focusNextFrom(from, document)\n })\n }\n return\n }\n\n requestAnimationFrame(() => triggerRef.current?.focus?.())\n lastCloseReasonRef.current = 'programmatic'\n }, [open, restoreFocusOnClose, triggerRef, lastCloseReasonRef])\n}\n","// External Libraries\nimport { useMemo } from 'react'\nimport type { RefObject } from 'react'\n\n// Hooks\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Utils\nimport { createsFixedContainingBlock } from '../../utils'\n\ntype Params = {\n portalId?: string\n portalContainer: HTMLElement | null\n portalRef: RefObject<HTMLElement | null>\n floatingOptions?: FloatingOptions\n absoluteReference?: FloatingOptions['absoluteReference']\n}\n\nexport function usePopoverFloatingOptions({\n portalId,\n portalContainer,\n portalRef,\n floatingOptions,\n absoluteReference\n}: Params) {\n return useMemo(() => {\n const base = {\n offsetY: 6,\n keepInViewport: true,\n placement: 'bottom-start',\n portalRef\n } as const\n\n const userStrategy = floatingOptions?.strategy ?? 'fixed'\n\n const shouldFixFixedInPortal =\n !!portalId &&\n portalContainer &&\n userStrategy === 'fixed' &&\n portalContainer !== document.body &&\n createsFixedContainingBlock(portalContainer)\n\n if (shouldFixFixedInPortal) {\n return {\n ...base,\n ...floatingOptions,\n strategy: 'absolute',\n absoluteReference: 'offsetParent'\n } as any\n }\n\n return {\n ...base,\n ...floatingOptions,\n absoluteReference\n } as any\n }, [portalId, portalContainer, portalRef, floatingOptions, absoluteReference])\n}\n","// Types\nimport type { PopoverProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createPopoverStyles({ hideShadow = false }: PopoverProps) {\n return styled({\n popoverNode: {\n position: 'fixed',\n left: 0,\n top: 0,\n\n zIndex: 10,\n\n padding: '0.25rem',\n\n backgroundColor: 'var(--px-bg)',\n boxShadow: hideShadow ? 'none' : 'var(--px-ring-1)',\n\n borderRadius: 'var(--px-radius-xl)'\n },\n\n trigger: {\n width: 'fit-content',\n height: 'fit-content'\n }\n })\n}\n","// External Libraries\nimport type { MouseEvent, MouseEventHandler, ReactNode, RefObject } from 'react'\n\n// Types\nimport type { createPopoverStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PaddingProps } from '@hooks/useThemedStyles/types'\n\nexport type PopoverTriggerRenderProps = {\n ariaExpanded: boolean\n ref: RefObject<HTMLElement>\n onClick: (event: MouseEvent<HTMLSpanElement>) => void\n}\n\nexport type CloseReason = 'outside' | 'escape' | 'tab' | 'programmatic'\n\nexport interface PopoverProps extends PaddingProps {\n open?: boolean\n portalId?: string\n containerId?: string\n hideShadow?: boolean\n dismissScope?: string\n closeOnEscape?: boolean\n closeOnOutsideClick?: boolean\n floatingOptions?: FloatingOptions\n anchorRef?: RefObject<HTMLElement>\n absoluteReference?: FloatingOptions['absoluteReference']\n\n restoreFocusOnClose?: boolean\n\n onOpenChange?: (v: boolean) => void\n onMouseEnter?: MouseEventHandler<HTMLDivElement>\n onMouseLeave?: MouseEventHandler<HTMLDivElement>\n content: (ctx: { close: () => void; widthTrigger: number }) => ReactNode\n trigger?: (props: PopoverTriggerRenderProps) => ReactNode\n\n styles?: Partial<ReturnType<typeof createPopoverStyles>>\n}\n","// External Libraries\nimport type React from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n type MouseEvent,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react'\n\n// Hooks\nimport { useDismiss } from '@hooks/useDismiss'\nimport { useFloating } from '@hooks/useFloating'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\nimport { usePortalContainer } from './hooks/usePortalContainer'\nimport { usePopoverA11yFocus } from './hooks/usePopoverA11yFocus'\nimport { usePopoverFloatingOptions } from './hooks/usePopoverFloatingOptions'\n\n// Types\nimport type { CloseReason, PopoverProps } from './types'\n\n// Styles\nimport { createPopoverStyles } from './styles'\n\nexport * as PopoverTypes from './types'\n\nexport const Popover: React.FC<PopoverProps> = props => {\n const {\n portalId,\n anchorRef,\n dismissScope,\n floatingOptions,\n absoluteReference,\n closeOnEscape = true,\n open: controlledOpen,\n closeOnOutsideClick = true,\n restoreFocusOnClose = true,\n trigger,\n content,\n onOpenChange,\n onMouseEnter,\n onMouseLeave\n } = props\n\n const triggerRef = useRef<HTMLElement | null>(null)\n const popoverRef = useRef<HTMLDivElement | null>(null)\n const resolvedAnchorRef = (anchorRef ?? triggerRef) as any\n\n const lastCloseReasonRef = useRef<CloseReason>('programmatic')\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(false)\n const [widthTrigger, setWidthTrigger] = useState(0)\n const open = controlledOpen ?? uncontrolledOpen\n\n const { portalRef, portalContainer } = usePortalContainer(portalId)\n\n const { styles } = useThemedStyles(props, createPopoverStyles, {\n applyCommonProps: true,\n override: props.styles,\n commonSlot: 'popoverNode',\n pick: p => [p.open, p.content, p.trigger]\n })\n\n const setOpen = useCallback(\n (v: boolean) => {\n onOpenChange?.(v)\n if (controlledOpen === undefined) setUncontrolledOpen(v)\n },\n [controlledOpen, onOpenChange]\n )\n\n const effectiveFloating = usePopoverFloatingOptions({\n portalId,\n portalContainer: portalContainer as any,\n portalRef,\n floatingOptions,\n absoluteReference\n })\n\n const { floatingRef, update } = useFloating(\n resolvedAnchorRef,\n effectiveFloating\n )\n\n usePopoverA11yFocus({\n open,\n triggerRef,\n lastCloseReasonRef,\n restoreFocusOnClose,\n setOpen\n })\n\n useDismiss({\n open,\n closeOnEscape,\n closeOnOutsideClick,\n dismissScope: props.dismissScope,\n refs: [triggerRef, popoverRef],\n onClose: () => {\n lastCloseReasonRef.current = 'outside'\n setOpen(false)\n }\n })\n\n useEffect(() => {\n if (!open) return\n setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n requestAnimationFrame(update)\n }, [open, update])\n\n const triggerNode =\n trigger?.({\n ariaExpanded: open,\n ref: triggerRef as any,\n onClick: handleTriggerClick\n }) ?? null\n\n const popoverNode = open ? (\n <div\n ref={el => {\n popoverRef.current = el\n floatingRef(el as any)\n }}\n role=\"dialog\"\n style={styles.popoverNode}\n data-dismiss-scope={dismissScope}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onKeyDown={e => {\n if (e.key === 'Escape') {\n e.preventDefault()\n lastCloseReasonRef.current = 'escape'\n setOpen(false)\n }\n }}\n >\n {content({ close: () => setOpen(false), widthTrigger })}\n </div>\n ) : null\n\n // Functions\n function handleTriggerClick(e: MouseEvent) {\n e.stopPropagation()\n e.preventDefault()\n setOpen(!open)\n }\n\n return (\n <>\n {triggerNode}\n {typeof document !== 'undefined'\n ? createPortal(popoverNode, portalContainer ?? document.body)\n : null}\n </>\n )\n}\n"],"mappings":";;;;;;;;AAGA,SAAgB,mBAAmB,UAAmB;CACpD,MAAM,YAAY,OAA2B,KAAK;CAClD,MAAM,CAAC,UAAU,eAAe,SAA6B,KAAK;AAElE,iBAAgB;AACd,MAAI,OAAO,aAAa,YAAa;AAErC,MAAI,CAAC,UAAU;AACb,eAAY,KAAK;AACjB;;EAGF,MAAM,QAAQ,SAAS,eAAe,SAAS;AAC/C,cAAY,MAAM;AAClB,MAAI,MAAO;EAEX,MAAM,MAAM,IAAI,uBAAuB;GACrC,MAAM,KAAK,SAAS,eAAe,SAAS;AAC5C,OAAI,IAAI;AACN,gBAAY,GAAG;AACf,QAAI,YAAY;;IAElB;AAEF,MAAI,QAAQ,SAAS,iBAAiB;GAAE,WAAW;GAAM,SAAS;GAAM,CAAC;AACzE,eAAa,IAAI,YAAY;IAC5B,CAAC,SAAS,CAAC;AAEd,iBAAgB;AACd,YAAU,UAAU;IACnB,CAAC,SAAS,CAAC;AAOd,QAAO;EAAE;EAAW;EAAU,iBALN,cAAc;AACpC,OAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,UAAO,YAAY,SAAS;KAC3B,CAAC,SAAS,CAAC;EAEiC;;;;;ACxCjD,MAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC,KAAK,IAAI;AAEX,SAAS,UAAU,IAAiB;CAClC,MAAM,QAAQ,OAAO,iBAAiB,GAAG;AACzC,KAAI,MAAM,YAAY,UAAU,MAAM,eAAe,SAAU,QAAO;CACtE,MAAM,IAAI,GAAG,uBAAuB;AACpC,QAAO,EAAE,QAAQ,KAAK,EAAE,SAAS;;AAGnC,SAAgB,cAAc,MAAmB,OAAmB,UAAU;CAC5E,MAAM,OAAO,MAAM,KAAK,KAAK,iBAA8B,SAAS,CAAC,CAAC,OACpE,UACD;CAED,MAAM,IAAI,KAAK,QAAQ,KAAK;CAC5B,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK;AACzC,OAAM,SAAS;AACf,QAAO,QAAQ;;;;;ACnBjB,SAAgB,4BAA4B,IAA0B;CACpE,IAAIA,OAA2B;AAC/B,QAAO,MAAM;EACX,MAAM,IAAI,iBAAiB,KAAK;AAChC,MACE,EAAE,cAAc,UAChB,EAAE,cAAc,UAChB,EAAE,gBAAgB,UAClB,EAAE,WAAW,UACb,EAAE,mBAAmB,UACrB,EAAE,QAAQ,SAAS,QAAQ,CAE3B,QAAO;AAET,SAAO,KAAK;;AAEd,QAAO;;;;;ACLT,SAAgB,oBAAoB,EAClC,MACA,qBACA,YACA,oBACA,WACS;CACT,MAAM,kBAAkB,OAA2B,KAAK;CACxD,MAAM,cAAc,OAAgB,KAAK;AAEzC,iBAAgB;AACd,MAAI,CAAC,KAAM;AACX,MAAI,OAAO,aAAa,YAAa;EAErC,MAAM,oBAAoB,MAAqB;AAC7C,OAAI,EAAE,QAAQ,MAAO;AACrB,sBAAmB,UAAU;AAC7B,mBAAgB,UAAU,WAAW;AACrC,WAAQ,MAAM;;AAGhB,WAAS,iBAAiB,WAAW,kBAAkB,KAAK;AAC5D,eAAa,SAAS,oBAAoB,WAAW,kBAAkB,KAAK;IAC3E;EAAC;EAAM;EAAS;EAAY;EAAmB,CAAC;AAEnD,iBAAgB;EACd,MAAM,UAAU,YAAY;AAC5B,cAAY,UAAU;AAEtB,MAAI,KAAM;AACV,MAAI,CAAC,QAAS;AAEd,MAAI,CAAC,oBAAqB;AAI1B,MAFe,mBAAmB,YAEnB,OAAO;GACpB,MAAM,OAAO,gBAAgB;AAC7B,mBAAgB,UAAU;AAC1B,sBAAmB,UAAU;AAE7B,OAAI,KACF,6BAA4B;AAC1B,kBAAc,MAAM,SAAS;KAC7B;AAEJ;;AAGF,8BAA4B,WAAW,SAAS,SAAS,CAAC;AAC1D,qBAAmB,UAAU;IAC5B;EAAC;EAAM;EAAqB;EAAY;EAAmB,CAAC;;;;;AClDjE,SAAgB,0BAA0B,EACxC,UACA,iBACA,WACA,iBACA,qBACS;AACT,QAAO,cAAc;EACnB,MAAM,OAAO;GACX,SAAS;GACT,gBAAgB;GAChB,WAAW;GACX;GACD;EAED,MAAM,eAAe,iBAAiB,YAAY;AASlD,MANE,CAAC,CAAC,YACF,mBACA,iBAAiB,WACjB,oBAAoB,SAAS,QAC7B,4BAA4B,gBAAgB,CAG5C,QAAO;GACL,GAAG;GACH,GAAG;GACH,UAAU;GACV,mBAAmB;GACpB;AAGH,SAAO;GACL,GAAG;GACH,GAAG;GACH;GACD;IACA;EAAC;EAAU;EAAiB;EAAW;EAAiB;EAAkB,CAAC;;;;;ACpDhF,SAAgB,oBAAoB,EAAE,aAAa,SAAuB;AACxE,QAAO,OAAO;EACZ,aAAa;GACX,UAAU;GACV,MAAM;GACN,KAAK;GAEL,QAAQ;GAER,SAAS;GAET,iBAAiB;GACjB,WAAW,aAAa,SAAS;GAEjC,cAAc;GACf;EAED,SAAS;GACP,OAAO;GACP,QAAQ;GACT;EACF,CAAC;;;;;;;;;AEEJ,MAAaC,WAAkC,UAAS;CACtD,MAAM,EACJ,UACA,WACA,cACA,iBACA,mBACA,gBAAgB,MAChB,MAAM,gBACN,sBAAsB,MACtB,sBAAsB,MACtB,SACA,SACA,cACA,cACA,iBACE;CAEJ,MAAM,aAAa,OAA2B,KAAK;CACnD,MAAM,aAAa,OAA8B,KAAK;CACtD,MAAM,oBAAqB,aAAa;CAExC,MAAM,qBAAqB,OAAoB,eAAe;CAE9D,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAC/D,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,OAAO,kBAAkB;CAE/B,MAAM,EAAE,WAAW,oBAAoB,mBAAmB,SAAS;CAEnE,MAAM,EAAE,WAAW,gBAAgB,OAAO,qBAAqB;EAC7D,kBAAkB;EAClB,UAAU,MAAM;EAChB,YAAY;EACZ,OAAM,MAAK;GAAC,EAAE;GAAM,EAAE;GAAS,EAAE;GAAQ;EAC1C,CAAC;CAEF,MAAM,UAAU,aACb,MAAe;AACd,iBAAe,EAAE;AACjB,MAAI,mBAAmB,OAAW,qBAAoB,EAAE;IAE1D,CAAC,gBAAgB,aAAa,CAC/B;CAUD,MAAM,EAAE,aAAa,WAAW,YAC9B,mBATwB,0BAA0B;EAClD;EACiB;EACjB;EACA;EACA;EACD,CAAC,CAKD;AAED,qBAAoB;EAClB;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,YAAW;EACT;EACA;EACA;EACA,cAAc,MAAM;EACpB,MAAM,CAAC,YAAY,WAAW;EAC9B,eAAe;AACb,sBAAmB,UAAU;AAC7B,WAAQ,MAAM;;EAEjB,CAAC;AAEF,iBAAgB;AACd,MAAI,CAAC,KAAM;AACX,kBAAgB,WAAW,SAAS,eAAe,EAAE;AACrD,wBAAsB,OAAO;IAC5B,CAAC,MAAM,OAAO,CAAC;CAElB,MAAM,cACJ,UAAU;EACR,cAAc;EACd,KAAK;EACL,SAAS;EACV,CAAC,IAAI;CAER,MAAM,cAAc,OAClB,oBAAC;EACC,MAAK,OAAM;AACT,cAAW,UAAU;AACrB,eAAY,GAAU;;EAExB,MAAK;EACL,OAAO,OAAO;EACd,sBAAoB;EACN;EACA;EACd,YAAW,MAAK;AACd,OAAI,EAAE,QAAQ,UAAU;AACtB,MAAE,gBAAgB;AAClB,uBAAmB,UAAU;AAC7B,YAAQ,MAAM;;;YAIjB,QAAQ;GAAE,aAAa,QAAQ,MAAM;GAAE;GAAc,CAAC;GACnD,GACJ;CAGJ,SAAS,mBAAmB,GAAe;AACzC,IAAE,iBAAiB;AACnB,IAAE,gBAAgB;AAClB,UAAQ,CAAC,KAAK;;AAGhB,QACE,8CACG,aACA,OAAO,aAAa,cACjB,aAAa,aAAa,mBAAmB,SAAS,KAAK,GAC3D,QACH"}
|
|
File without changes
|