@vacano/ui 1.4.5 → 1.6.0
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/index.cjs +341 -405
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +33 -0
- package/dist/index.js +2034 -1977
- package/dist/index.js.map +1 -1
- package/dist/lib.cjs +1 -1
- package/dist/lib.d.ts +24 -0
- package/dist/lib.js +1 -1
- package/dist/media-BuwIclXE.cjs +51 -0
- package/dist/media-BuwIclXE.cjs.map +1 -0
- package/dist/{media-BR6nutcO.js → media-CWK1OED-.js} +54 -38
- package/dist/media-CWK1OED-.js.map +1 -0
- package/package.json +1 -1
- package/dist/media-BR6nutcO.js.map +0 -1
- package/dist/media-OVL6YjWb.cjs +0 -39
- package/dist/media-OVL6YjWb.cjs.map +0 -1
package/dist/lib.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./media-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./media-BuwIclXE.cjs"),t=require("./tooling-Dflq0Y98.cjs");exports.BREAKPOINTS=e.BREAKPOINTS;exports.COLORS=e.COLORS;exports.KEYFRAMES=e.KEYFRAMES;exports.KEY_SYMBOLS=e.KEY_SYMBOLS;exports.alpha=e.alpha;exports.getBrowser=e.getBrowser;exports.getKeySymbols=e.getKeySymbols;exports.getOperatingSystem=e.getOperatingSystem;exports.isValid=e.isValid;exports.mediaBetween=e.mediaBetween;exports.mediaDown=e.mediaDown;exports.mediaUp=e.mediaUp;exports.toHEX=e.toHEX;exports.useKeyBinding=e.useKeyBinding;exports.newClassNameGetter=t.newClassNameGetter;
|
|
2
2
|
//# sourceMappingURL=lib.cjs.map
|
package/dist/lib.d.ts
CHANGED
|
@@ -118,6 +118,30 @@ export declare const KEYFRAMES: {
|
|
|
118
118
|
anim: 1;
|
|
119
119
|
toString: () => string;
|
|
120
120
|
} & string;
|
|
121
|
+
slideInTopFade: {
|
|
122
|
+
name: string;
|
|
123
|
+
styles: string;
|
|
124
|
+
anim: 1;
|
|
125
|
+
toString: () => string;
|
|
126
|
+
} & string;
|
|
127
|
+
slideOutTopFade: {
|
|
128
|
+
name: string;
|
|
129
|
+
styles: string;
|
|
130
|
+
anim: 1;
|
|
131
|
+
toString: () => string;
|
|
132
|
+
} & string;
|
|
133
|
+
slideInBottomFade: {
|
|
134
|
+
name: string;
|
|
135
|
+
styles: string;
|
|
136
|
+
anim: 1;
|
|
137
|
+
toString: () => string;
|
|
138
|
+
} & string;
|
|
139
|
+
slideOutBottomFade: {
|
|
140
|
+
name: string;
|
|
141
|
+
styles: string;
|
|
142
|
+
anim: 1;
|
|
143
|
+
toString: () => string;
|
|
144
|
+
} & string;
|
|
121
145
|
};
|
|
122
146
|
|
|
123
147
|
export declare const mediaBetween: (min: Breakpoint, max: Breakpoint) => string;
|
package/dist/lib.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { B as s, C as t, K as i, f as m, a as o, e as r, g as n, d as S, i as d, c as g, b as B, m as K, t as p, u as E } from "./media-
|
|
1
|
+
import { B as s, C as t, K as i, f as m, a as o, e as r, g as n, d as S, i as d, c as g, b as B, m as K, t as p, u as E } from "./media-CWK1OED-.js";
|
|
2
2
|
import { n as l } from "./tooling-YDHxmiMT.js";
|
|
3
3
|
export {
|
|
4
4
|
s as BREAKPOINTS,
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";const m=require("react"),e=require("@emotion/react"),d=t=>t.length===1&&/[a-z]/i.test(t)?t.toUpperCase():t,k=(t,a)=>{const r=m.useRef(new Set),n=m.useRef(a);n.current=a,m.useEffect(()=>{const f=new Set(t),g=()=>{if(f.size!==r.current.size)return!1;for(const o of f)if(!r.current.has(o))return!1;return!0},c=o=>{const i=d(o.key);r.current.add(i),g()&&n.current&&(o.preventDefault(),n.current())},l=o=>{const i=d(o.key);r.current.delete(i)},u=()=>{r.current.clear()};return window.addEventListener("keydown",c),window.addEventListener("keyup",l),window.addEventListener("blur",u),()=>{window.removeEventListener("keydown",c),window.removeEventListener("keyup",l),window.removeEventListener("blur",u)}},[t])},p=t=>{const a=Math.max(0,Math.min(100,t));return Math.round(a/100*255).toString(16).padStart(2,"0")},y=t=>/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t),E=(t,a)=>{if(!y(t))return"#000000FF";const r=t.replace("#","").slice(0,6),n=p(a);return`#${r}${n}`},h=()=>{if(typeof navigator>"u")return"unknown";const t=navigator.userAgent.toLowerCase();return/iphone|ipad|ipod/.test(t)?"ios":/android/.test(t)?"android":/mac/.test(t)?"macos":/win/.test(t)?"windows":/linux/.test(t)?"linux":"unknown"},Y=()=>{if(typeof navigator>"u")return"unknown";const t=navigator.userAgent.toLowerCase();return/edg/.test(t)?"edge":/opr|opera/.test(t)?"opera":/chrome/.test(t)?"chrome":/safari/.test(t)?"safari":/firefox/.test(t)?"firefox":"unknown"},s={sm:640,md:768,lg:1024,xl:1280,"2xl":1536},S={black:"#212529",white:"#ffffff",red:"#C1121F",green:"#16a34a",yellow:"#ffb703",gray:"#e5e7eb","steel-blue":"#0582ca","iron-grey":"#495057","baltic-blue":"#1e6091"},L={rotate:e.keyframes`
|
|
2
|
+
to {
|
|
3
|
+
transform: rotate(1turn);
|
|
4
|
+
}
|
|
5
|
+
`,fadeIn:e.keyframes`
|
|
6
|
+
from { opacity: 0; }
|
|
7
|
+
to { opacity: 1; }
|
|
8
|
+
`,fadeOut:e.keyframes`
|
|
9
|
+
from { opacity: 1; }
|
|
10
|
+
to { opacity: 0; }
|
|
11
|
+
`,slideInLeft:e.keyframes`
|
|
12
|
+
from { transform: translateX(-100%); }
|
|
13
|
+
to { transform: translateX(0); }
|
|
14
|
+
`,slideOutLeft:e.keyframes`
|
|
15
|
+
from { transform: translateX(0); }
|
|
16
|
+
to { transform: translateX(-100%); }
|
|
17
|
+
`,slideInRight:e.keyframes`
|
|
18
|
+
from { transform: translateX(100%); }
|
|
19
|
+
to { transform: translateX(0); }
|
|
20
|
+
`,slideOutRight:e.keyframes`
|
|
21
|
+
from { transform: translateX(0); }
|
|
22
|
+
to { transform: translateX(100%); }
|
|
23
|
+
`,slideInTop:e.keyframes`
|
|
24
|
+
from { transform: translateY(-100%); }
|
|
25
|
+
to { transform: translateY(0); }
|
|
26
|
+
`,slideOutTop:e.keyframes`
|
|
27
|
+
from { transform: translateY(0); }
|
|
28
|
+
to { transform: translateY(-100%); }
|
|
29
|
+
`,slideInBottom:e.keyframes`
|
|
30
|
+
from { transform: translateY(100%); }
|
|
31
|
+
to { transform: translateY(0); }
|
|
32
|
+
`,slideOutBottom:e.keyframes`
|
|
33
|
+
from { transform: translateY(0); }
|
|
34
|
+
to { transform: translateY(100%); }
|
|
35
|
+
`,scaleIn:e.keyframes`
|
|
36
|
+
from { opacity: 0; transform: scale(0.95); }
|
|
37
|
+
to { opacity: 1; transform: scale(1); }
|
|
38
|
+
`,slideInTopFade:e.keyframes`
|
|
39
|
+
from { opacity: 0; transform: translateY(-100%); }
|
|
40
|
+
to { opacity: 1; transform: translateY(0); }
|
|
41
|
+
`,slideOutTopFade:e.keyframes`
|
|
42
|
+
from { opacity: 1; transform: translateY(0); }
|
|
43
|
+
to { opacity: 0; transform: translateY(-100%); }
|
|
44
|
+
`,slideInBottomFade:e.keyframes`
|
|
45
|
+
from { opacity: 0; transform: translateY(100%); }
|
|
46
|
+
to { opacity: 1; transform: translateY(0); }
|
|
47
|
+
`,slideOutBottomFade:e.keyframes`
|
|
48
|
+
from { opacity: 1; transform: translateY(0); }
|
|
49
|
+
to { opacity: 0; transform: translateY(100%); }
|
|
50
|
+
`},w={Meta:{mac:"⌘",other:"Win"},Control:{mac:"⌃",other:"Ctrl"},Alt:{mac:"⌥",other:"Alt"},Shift:{mac:"⇧",other:"⇧"},ArrowUp:{mac:"↑",other:"↑"},ArrowDown:{mac:"↓",other:"↓"},ArrowLeft:{mac:"←",other:"←"},ArrowRight:{mac:"→",other:"→"},Home:{mac:"↖",other:"↖"},End:{mac:"↘",other:"↘"},PageUp:{mac:"⇞",other:"⇞"},PageDown:{mac:"⇟",other:"⇟"}," ":{mac:"␣",other:"␣"},Enter:{mac:"Enter",other:"Enter"},Tab:{mac:"⇥",other:"⇥"},Backspace:{mac:"⌫",other:"⌫"},Delete:{mac:"⌦",other:"⌦"},Escape:{mac:"Esc",other:"Esc"},Insert:{mac:"Ins",other:"Ins"},CapsLock:{mac:"⇪",other:"⇪"},NumLock:{mac:"⇭",other:"⇭"}},O=t=>{if(!t)return[];const a=h();return t.map(r=>{const n=w[r];return n?a==="macos"?n.mac:n.other:r})},v=t=>`@media (min-width: ${s[t]}px)`,B=t=>`@media (max-width: ${s[t]-1}px)`,x=(t,a)=>`@media (min-width: ${s[t]}px) and (max-width: ${s[a]-1}px)`;exports.BREAKPOINTS=s;exports.COLORS=S;exports.KEYFRAMES=L;exports.KEY_SYMBOLS=w;exports.alpha=E;exports.getBrowser=Y;exports.getKeySymbols=O;exports.getOperatingSystem=h;exports.isValid=y;exports.mediaBetween=x;exports.mediaDown=B;exports.mediaUp=v;exports.toHEX=p;exports.useKeyBinding=k;
|
|
51
|
+
//# sourceMappingURL=media-BuwIclXE.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-BuwIclXE.cjs","sources":["../src/lib/hooks/useKeyBinding.ts","../src/lib/utils/colors.ts","../src/lib/utils/platform.ts","../src/lib/constants.ts","../src/lib/utils/keyboard.ts","../src/lib/utils/media.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nimport { KeyboardEventKey } from '../types'\n\nconst normalizeKey = (key: string): string => {\n if (key.length === 1 && /[a-z]/i.test(key)) {\n return key.toUpperCase()\n }\n return key\n}\n\nexport const useKeyBinding = (keys: KeyboardEventKey[], cb?: () => void) => {\n const pressedKeys = useRef<Set<string>>(new Set())\n const cbRef = useRef(cb)\n\n cbRef.current = cb\n\n useEffect(() => {\n const keysSet = new Set(keys)\n\n const checkMatch = () => {\n if (keysSet.size !== pressedKeys.current.size) {\n return false\n }\n\n for (const key of keysSet) {\n if (!pressedKeys.current.has(key)) {\n return false\n }\n }\n\n return true\n }\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const key = normalizeKey(e.key)\n pressedKeys.current.add(key)\n\n if (checkMatch() && cbRef.current) {\n e.preventDefault()\n cbRef.current()\n }\n }\n\n const handleKeyUp = (e: KeyboardEvent) => {\n const key = normalizeKey(e.key)\n pressedKeys.current.delete(key)\n }\n\n const handleBlur = () => {\n pressedKeys.current.clear()\n }\n\n window.addEventListener('keydown', handleKeyDown)\n window.addEventListener('keyup', handleKeyUp)\n window.addEventListener('blur', handleBlur)\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n window.removeEventListener('keyup', handleKeyUp)\n window.removeEventListener('blur', handleBlur)\n }\n }, [keys])\n}\n","export const toHEX = (n: number): string => {\n const clamped = Math.max(0, Math.min(100, n))\n const value = Math.round((clamped / 100) * 255)\n\n return value.toString(16).padStart(2, '0')\n}\n\nexport const isValid = (hexColor: string): boolean => {\n return /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hexColor)\n}\n\nexport const alpha = (hexColor: string, percentage: number): string => {\n if (!isValid(hexColor)) {\n return '#000000FF'\n }\n\n const hex = hexColor.replace('#', '').slice(0, 6)\n const alphaHex = toHEX(percentage)\n\n return `#${hex}${alphaHex}`\n}\n","import { Browser, OperatingSystem } from '../types'\n\nexport const getOperatingSystem = (): OperatingSystem => {\n if (typeof navigator === 'undefined') {\n return 'unknown'\n }\n\n const ua = navigator.userAgent.toLowerCase()\n\n if (/iphone|ipad|ipod/.test(ua)) return 'ios'\n if (/android/.test(ua)) return 'android'\n if (/mac/.test(ua)) return 'macos'\n if (/win/.test(ua)) return 'windows'\n if (/linux/.test(ua)) return 'linux'\n\n return 'unknown'\n}\n\nexport const getBrowser = (): Browser => {\n if (typeof navigator === 'undefined') {\n return 'unknown'\n }\n\n const ua = navigator.userAgent.toLowerCase()\n\n if (/edg/.test(ua)) return 'edge'\n if (/opr|opera/.test(ua)) return 'opera'\n if (/chrome/.test(ua)) return 'chrome'\n if (/safari/.test(ua)) return 'safari'\n if (/firefox/.test(ua)) return 'firefox'\n\n return 'unknown'\n}\n","import { keyframes } from '@emotion/react'\n\nimport { KeyboardEventKey } from './types'\n\nexport const BREAKPOINTS = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n '2xl': 1536,\n} as const\n\nexport const COLORS = {\n black: '#212529',\n white: '#ffffff',\n red: '#C1121F',\n green: '#16a34a',\n yellow: '#ffb703',\n gray: '#e5e7eb',\n 'steel-blue': '#0582ca',\n 'iron-grey': '#495057',\n 'baltic-blue': '#1e6091',\n} as const\n\nexport const KEYFRAMES = {\n rotate: keyframes`\n to {\n transform: rotate(1turn);\n }\n `,\n fadeIn: keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n `,\n fadeOut: keyframes`\n from { opacity: 1; }\n to { opacity: 0; }\n `,\n slideInLeft: keyframes`\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n `,\n slideOutLeft: keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(-100%); }\n `,\n slideInRight: keyframes`\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n `,\n slideOutRight: keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(100%); }\n `,\n slideInTop: keyframes`\n from { transform: translateY(-100%); }\n to { transform: translateY(0); }\n `,\n slideOutTop: keyframes`\n from { transform: translateY(0); }\n to { transform: translateY(-100%); }\n `,\n slideInBottom: keyframes`\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n `,\n slideOutBottom: keyframes`\n from { transform: translateY(0); }\n to { transform: translateY(100%); }\n `,\n scaleIn: keyframes`\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n `,\n slideInTopFade: keyframes`\n from { opacity: 0; transform: translateY(-100%); }\n to { opacity: 1; transform: translateY(0); }\n `,\n slideOutTopFade: keyframes`\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-100%); }\n `,\n slideInBottomFade: keyframes`\n from { opacity: 0; transform: translateY(100%); }\n to { opacity: 1; transform: translateY(0); }\n `,\n slideOutBottomFade: keyframes`\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(100%); }\n `,\n}\n\nexport const KEY_SYMBOLS: Partial<Record<KeyboardEventKey, { mac: string; other: string }>> = {\n // Modifiers\n Meta: { mac: '⌘', other: 'Win' },\n Control: { mac: '⌃', other: 'Ctrl' },\n Alt: { mac: '⌥', other: 'Alt' },\n Shift: { mac: '⇧', other: '⇧' },\n\n // Navigation\n ArrowUp: { mac: '↑', other: '↑' },\n ArrowDown: { mac: '↓', other: '↓' },\n ArrowLeft: { mac: '←', other: '←' },\n ArrowRight: { mac: '→', other: '→' },\n Home: { mac: '↖', other: '↖' },\n End: { mac: '↘', other: '↘' },\n PageUp: { mac: '⇞', other: '⇞' },\n PageDown: { mac: '⇟', other: '⇟' },\n\n // Whitespace & Enter\n ' ': { mac: '␣', other: '␣' },\n Enter: { mac: 'Enter', other: 'Enter' },\n Tab: { mac: '⇥', other: '⇥' },\n\n // Editing\n Backspace: { mac: '⌫', other: '⌫' },\n Delete: { mac: '⌦', other: '⌦' },\n Escape: { mac: 'Esc', other: 'Esc' },\n Insert: { mac: 'Ins', other: 'Ins' },\n\n // System\n CapsLock: { mac: '⇪', other: '⇪' },\n NumLock: { mac: '⇭', other: '⇭' },\n}\n","import { getOperatingSystem } from './platform'\nimport { KEY_SYMBOLS } from '../constants'\nimport { KeyboardEventKey } from '../types'\n\nexport const getKeySymbols = (keys?: KeyboardEventKey[]): string[] => {\n if (!keys) {\n return []\n }\n\n const os = getOperatingSystem()\n\n return keys.map((key) => {\n const symbol = KEY_SYMBOLS[key]\n\n if (!symbol) {\n return key\n }\n\n return os === 'macos' ? symbol.mac : symbol.other\n })\n}\n","import { BREAKPOINTS } from '../constants'\n\ntype Breakpoint = keyof typeof BREAKPOINTS\n\nexport const mediaUp = (bp: Breakpoint) => {\n return `@media (min-width: ${BREAKPOINTS[bp]}px)`\n}\n\nexport const mediaDown = (bp: Breakpoint) => {\n return `@media (max-width: ${BREAKPOINTS[bp] - 1}px)`\n}\n\nexport const mediaBetween = (min: Breakpoint, max: Breakpoint) => {\n return `@media (min-width: ${BREAKPOINTS[min]}px) and (max-width: ${BREAKPOINTS[max] - 1}px)`\n}\n"],"names":["normalizeKey","key","useKeyBinding","keys","cb","pressedKeys","useRef","cbRef","useEffect","keysSet","checkMatch","handleKeyDown","e","handleKeyUp","handleBlur","toHEX","n","clamped","isValid","hexColor","alpha","percentage","hex","alphaHex","getOperatingSystem","ua","getBrowser","BREAKPOINTS","COLORS","KEYFRAMES","keyframes","KEY_SYMBOLS","getKeySymbols","os","symbol","mediaUp","bp","mediaDown","mediaBetween","min","max"],"mappings":"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"}
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
import { useRef as
|
|
1
|
+
import { useRef as u, useEffect as h } from "react";
|
|
2
2
|
import { keyframes as e } from "@emotion/react";
|
|
3
|
-
const d = (t) => t.length === 1 && /[a-z]/i.test(t) ? t.toUpperCase() : t,
|
|
4
|
-
const r =
|
|
5
|
-
|
|
6
|
-
const c = new Set(t),
|
|
3
|
+
const d = (t) => t.length === 1 && /[a-z]/i.test(t) ? t.toUpperCase() : t, x = (t, a) => {
|
|
4
|
+
const r = u(/* @__PURE__ */ new Set()), n = u(a);
|
|
5
|
+
n.current = a, h(() => {
|
|
6
|
+
const c = new Set(t), p = () => {
|
|
7
7
|
if (c.size !== r.current.size)
|
|
8
8
|
return !1;
|
|
9
9
|
for (const o of c)
|
|
10
10
|
if (!r.current.has(o))
|
|
11
11
|
return !1;
|
|
12
12
|
return !0;
|
|
13
|
-
}, f = (o) => {
|
|
14
|
-
const i = d(o.key);
|
|
15
|
-
r.current.add(i), h() && a.current && (o.preventDefault(), a.current());
|
|
16
13
|
}, m = (o) => {
|
|
14
|
+
const i = d(o.key);
|
|
15
|
+
r.current.add(i), p() && n.current && (o.preventDefault(), n.current());
|
|
16
|
+
}, f = (o) => {
|
|
17
17
|
const i = d(o.key);
|
|
18
18
|
r.current.delete(i);
|
|
19
|
-
},
|
|
19
|
+
}, l = () => {
|
|
20
20
|
r.current.clear();
|
|
21
21
|
};
|
|
22
|
-
return window.addEventListener("keydown",
|
|
23
|
-
window.removeEventListener("keydown",
|
|
22
|
+
return window.addEventListener("keydown", m), window.addEventListener("keyup", f), window.addEventListener("blur", l), () => {
|
|
23
|
+
window.removeEventListener("keydown", m), window.removeEventListener("keyup", f), window.removeEventListener("blur", l);
|
|
24
24
|
};
|
|
25
25
|
}, [t]);
|
|
26
26
|
}, w = (t) => {
|
|
27
|
-
const
|
|
28
|
-
return Math.round(
|
|
29
|
-
},
|
|
30
|
-
if (!
|
|
27
|
+
const a = Math.max(0, Math.min(100, t));
|
|
28
|
+
return Math.round(a / 100 * 255).toString(16).padStart(2, "0");
|
|
29
|
+
}, y = (t) => /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t), L = (t, a) => {
|
|
30
|
+
if (!y(t))
|
|
31
31
|
return "#000000FF";
|
|
32
|
-
const r = t.replace("#", "").slice(0, 6),
|
|
33
|
-
return `#${r}${
|
|
34
|
-
},
|
|
32
|
+
const r = t.replace("#", "").slice(0, 6), n = w(a);
|
|
33
|
+
return `#${r}${n}`;
|
|
34
|
+
}, g = () => {
|
|
35
35
|
if (typeof navigator > "u")
|
|
36
36
|
return "unknown";
|
|
37
37
|
const t = navigator.userAgent.toLowerCase();
|
|
38
38
|
return /iphone|ipad|ipod/.test(t) ? "ios" : /android/.test(t) ? "android" : /mac/.test(t) ? "macos" : /win/.test(t) ? "windows" : /linux/.test(t) ? "linux" : "unknown";
|
|
39
|
-
},
|
|
39
|
+
}, k = () => {
|
|
40
40
|
if (typeof navigator > "u")
|
|
41
41
|
return "unknown";
|
|
42
42
|
const t = navigator.userAgent.toLowerCase();
|
|
@@ -47,7 +47,7 @@ const d = (t) => t.length === 1 && /[a-z]/i.test(t) ? t.toUpperCase() : t, L = (
|
|
|
47
47
|
lg: 1024,
|
|
48
48
|
xl: 1280,
|
|
49
49
|
"2xl": 1536
|
|
50
|
-
},
|
|
50
|
+
}, S = {
|
|
51
51
|
black: "#212529",
|
|
52
52
|
white: "#ffffff",
|
|
53
53
|
red: "#C1121F",
|
|
@@ -57,7 +57,7 @@ const d = (t) => t.length === 1 && /[a-z]/i.test(t) ? t.toUpperCase() : t, L = (
|
|
|
57
57
|
"steel-blue": "#0582ca",
|
|
58
58
|
"iron-grey": "#495057",
|
|
59
59
|
"baltic-blue": "#1e6091"
|
|
60
|
-
},
|
|
60
|
+
}, b = {
|
|
61
61
|
rotate: e`
|
|
62
62
|
to {
|
|
63
63
|
transform: rotate(1turn);
|
|
@@ -106,6 +106,22 @@ const d = (t) => t.length === 1 && /[a-z]/i.test(t) ? t.toUpperCase() : t, L = (
|
|
|
106
106
|
scaleIn: e`
|
|
107
107
|
from { opacity: 0; transform: scale(0.95); }
|
|
108
108
|
to { opacity: 1; transform: scale(1); }
|
|
109
|
+
`,
|
|
110
|
+
slideInTopFade: e`
|
|
111
|
+
from { opacity: 0; transform: translateY(-100%); }
|
|
112
|
+
to { opacity: 1; transform: translateY(0); }
|
|
113
|
+
`,
|
|
114
|
+
slideOutTopFade: e`
|
|
115
|
+
from { opacity: 1; transform: translateY(0); }
|
|
116
|
+
to { opacity: 0; transform: translateY(-100%); }
|
|
117
|
+
`,
|
|
118
|
+
slideInBottomFade: e`
|
|
119
|
+
from { opacity: 0; transform: translateY(100%); }
|
|
120
|
+
to { opacity: 1; transform: translateY(0); }
|
|
121
|
+
`,
|
|
122
|
+
slideOutBottomFade: e`
|
|
123
|
+
from { opacity: 1; transform: translateY(0); }
|
|
124
|
+
to { opacity: 0; transform: translateY(100%); }
|
|
109
125
|
`
|
|
110
126
|
}, E = {
|
|
111
127
|
// Modifiers
|
|
@@ -134,29 +150,29 @@ const d = (t) => t.length === 1 && /[a-z]/i.test(t) ? t.toUpperCase() : t, L = (
|
|
|
134
150
|
// System
|
|
135
151
|
CapsLock: { mac: "⇪", other: "⇪" },
|
|
136
152
|
NumLock: { mac: "⇭", other: "⇭" }
|
|
137
|
-
},
|
|
153
|
+
}, B = (t) => {
|
|
138
154
|
if (!t)
|
|
139
155
|
return [];
|
|
140
|
-
const
|
|
156
|
+
const a = g();
|
|
141
157
|
return t.map((r) => {
|
|
142
|
-
const
|
|
143
|
-
return
|
|
158
|
+
const n = E[r];
|
|
159
|
+
return n ? a === "macos" ? n.mac : n.other : r;
|
|
144
160
|
});
|
|
145
|
-
},
|
|
161
|
+
}, I = (t) => `@media (min-width: ${s[t]}px)`, O = (t) => `@media (max-width: ${s[t] - 1}px)`, A = (t, a) => `@media (min-width: ${s[t]}px) and (max-width: ${s[a] - 1}px)`;
|
|
146
162
|
export {
|
|
147
163
|
s as B,
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
164
|
+
S as C,
|
|
165
|
+
b as K,
|
|
166
|
+
L as a,
|
|
167
|
+
O as b,
|
|
168
|
+
A as c,
|
|
169
|
+
g as d,
|
|
170
|
+
k as e,
|
|
155
171
|
E as f,
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
172
|
+
B as g,
|
|
173
|
+
y as i,
|
|
174
|
+
I as m,
|
|
159
175
|
w as t,
|
|
160
|
-
|
|
176
|
+
x as u
|
|
161
177
|
};
|
|
162
|
-
//# sourceMappingURL=media-
|
|
178
|
+
//# sourceMappingURL=media-CWK1OED-.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-CWK1OED-.js","sources":["../src/lib/hooks/useKeyBinding.ts","../src/lib/utils/colors.ts","../src/lib/utils/platform.ts","../src/lib/constants.ts","../src/lib/utils/keyboard.ts","../src/lib/utils/media.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nimport { KeyboardEventKey } from '../types'\n\nconst normalizeKey = (key: string): string => {\n if (key.length === 1 && /[a-z]/i.test(key)) {\n return key.toUpperCase()\n }\n return key\n}\n\nexport const useKeyBinding = (keys: KeyboardEventKey[], cb?: () => void) => {\n const pressedKeys = useRef<Set<string>>(new Set())\n const cbRef = useRef(cb)\n\n cbRef.current = cb\n\n useEffect(() => {\n const keysSet = new Set(keys)\n\n const checkMatch = () => {\n if (keysSet.size !== pressedKeys.current.size) {\n return false\n }\n\n for (const key of keysSet) {\n if (!pressedKeys.current.has(key)) {\n return false\n }\n }\n\n return true\n }\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const key = normalizeKey(e.key)\n pressedKeys.current.add(key)\n\n if (checkMatch() && cbRef.current) {\n e.preventDefault()\n cbRef.current()\n }\n }\n\n const handleKeyUp = (e: KeyboardEvent) => {\n const key = normalizeKey(e.key)\n pressedKeys.current.delete(key)\n }\n\n const handleBlur = () => {\n pressedKeys.current.clear()\n }\n\n window.addEventListener('keydown', handleKeyDown)\n window.addEventListener('keyup', handleKeyUp)\n window.addEventListener('blur', handleBlur)\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n window.removeEventListener('keyup', handleKeyUp)\n window.removeEventListener('blur', handleBlur)\n }\n }, [keys])\n}\n","export const toHEX = (n: number): string => {\n const clamped = Math.max(0, Math.min(100, n))\n const value = Math.round((clamped / 100) * 255)\n\n return value.toString(16).padStart(2, '0')\n}\n\nexport const isValid = (hexColor: string): boolean => {\n return /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hexColor)\n}\n\nexport const alpha = (hexColor: string, percentage: number): string => {\n if (!isValid(hexColor)) {\n return '#000000FF'\n }\n\n const hex = hexColor.replace('#', '').slice(0, 6)\n const alphaHex = toHEX(percentage)\n\n return `#${hex}${alphaHex}`\n}\n","import { Browser, OperatingSystem } from '../types'\n\nexport const getOperatingSystem = (): OperatingSystem => {\n if (typeof navigator === 'undefined') {\n return 'unknown'\n }\n\n const ua = navigator.userAgent.toLowerCase()\n\n if (/iphone|ipad|ipod/.test(ua)) return 'ios'\n if (/android/.test(ua)) return 'android'\n if (/mac/.test(ua)) return 'macos'\n if (/win/.test(ua)) return 'windows'\n if (/linux/.test(ua)) return 'linux'\n\n return 'unknown'\n}\n\nexport const getBrowser = (): Browser => {\n if (typeof navigator === 'undefined') {\n return 'unknown'\n }\n\n const ua = navigator.userAgent.toLowerCase()\n\n if (/edg/.test(ua)) return 'edge'\n if (/opr|opera/.test(ua)) return 'opera'\n if (/chrome/.test(ua)) return 'chrome'\n if (/safari/.test(ua)) return 'safari'\n if (/firefox/.test(ua)) return 'firefox'\n\n return 'unknown'\n}\n","import { keyframes } from '@emotion/react'\n\nimport { KeyboardEventKey } from './types'\n\nexport const BREAKPOINTS = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n '2xl': 1536,\n} as const\n\nexport const COLORS = {\n black: '#212529',\n white: '#ffffff',\n red: '#C1121F',\n green: '#16a34a',\n yellow: '#ffb703',\n gray: '#e5e7eb',\n 'steel-blue': '#0582ca',\n 'iron-grey': '#495057',\n 'baltic-blue': '#1e6091',\n} as const\n\nexport const KEYFRAMES = {\n rotate: keyframes`\n to {\n transform: rotate(1turn);\n }\n `,\n fadeIn: keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n `,\n fadeOut: keyframes`\n from { opacity: 1; }\n to { opacity: 0; }\n `,\n slideInLeft: keyframes`\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n `,\n slideOutLeft: keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(-100%); }\n `,\n slideInRight: keyframes`\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n `,\n slideOutRight: keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(100%); }\n `,\n slideInTop: keyframes`\n from { transform: translateY(-100%); }\n to { transform: translateY(0); }\n `,\n slideOutTop: keyframes`\n from { transform: translateY(0); }\n to { transform: translateY(-100%); }\n `,\n slideInBottom: keyframes`\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n `,\n slideOutBottom: keyframes`\n from { transform: translateY(0); }\n to { transform: translateY(100%); }\n `,\n scaleIn: keyframes`\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n `,\n slideInTopFade: keyframes`\n from { opacity: 0; transform: translateY(-100%); }\n to { opacity: 1; transform: translateY(0); }\n `,\n slideOutTopFade: keyframes`\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-100%); }\n `,\n slideInBottomFade: keyframes`\n from { opacity: 0; transform: translateY(100%); }\n to { opacity: 1; transform: translateY(0); }\n `,\n slideOutBottomFade: keyframes`\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(100%); }\n `,\n}\n\nexport const KEY_SYMBOLS: Partial<Record<KeyboardEventKey, { mac: string; other: string }>> = {\n // Modifiers\n Meta: { mac: '⌘', other: 'Win' },\n Control: { mac: '⌃', other: 'Ctrl' },\n Alt: { mac: '⌥', other: 'Alt' },\n Shift: { mac: '⇧', other: '⇧' },\n\n // Navigation\n ArrowUp: { mac: '↑', other: '↑' },\n ArrowDown: { mac: '↓', other: '↓' },\n ArrowLeft: { mac: '←', other: '←' },\n ArrowRight: { mac: '→', other: '→' },\n Home: { mac: '↖', other: '↖' },\n End: { mac: '↘', other: '↘' },\n PageUp: { mac: '⇞', other: '⇞' },\n PageDown: { mac: '⇟', other: '⇟' },\n\n // Whitespace & Enter\n ' ': { mac: '␣', other: '␣' },\n Enter: { mac: 'Enter', other: 'Enter' },\n Tab: { mac: '⇥', other: '⇥' },\n\n // Editing\n Backspace: { mac: '⌫', other: '⌫' },\n Delete: { mac: '⌦', other: '⌦' },\n Escape: { mac: 'Esc', other: 'Esc' },\n Insert: { mac: 'Ins', other: 'Ins' },\n\n // System\n CapsLock: { mac: '⇪', other: '⇪' },\n NumLock: { mac: '⇭', other: '⇭' },\n}\n","import { getOperatingSystem } from './platform'\nimport { KEY_SYMBOLS } from '../constants'\nimport { KeyboardEventKey } from '../types'\n\nexport const getKeySymbols = (keys?: KeyboardEventKey[]): string[] => {\n if (!keys) {\n return []\n }\n\n const os = getOperatingSystem()\n\n return keys.map((key) => {\n const symbol = KEY_SYMBOLS[key]\n\n if (!symbol) {\n return key\n }\n\n return os === 'macos' ? symbol.mac : symbol.other\n })\n}\n","import { BREAKPOINTS } from '../constants'\n\ntype Breakpoint = keyof typeof BREAKPOINTS\n\nexport const mediaUp = (bp: Breakpoint) => {\n return `@media (min-width: ${BREAKPOINTS[bp]}px)`\n}\n\nexport const mediaDown = (bp: Breakpoint) => {\n return `@media (max-width: ${BREAKPOINTS[bp] - 1}px)`\n}\n\nexport const mediaBetween = (min: Breakpoint, max: Breakpoint) => {\n return `@media (min-width: ${BREAKPOINTS[min]}px) and (max-width: ${BREAKPOINTS[max] - 1}px)`\n}\n"],"names":["normalizeKey","key","useKeyBinding","keys","cb","pressedKeys","useRef","cbRef","useEffect","keysSet","checkMatch","handleKeyDown","e","handleKeyUp","handleBlur","toHEX","n","clamped","isValid","hexColor","alpha","percentage","hex","alphaHex","getOperatingSystem","ua","getBrowser","BREAKPOINTS","COLORS","KEYFRAMES","keyframes","KEY_SYMBOLS","getKeySymbols","os","symbol","mediaUp","bp","mediaDown","mediaBetween","min","max"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-BR6nutcO.js","sources":["../src/lib/hooks/useKeyBinding.ts","../src/lib/utils/colors.ts","../src/lib/utils/platform.ts","../src/lib/constants.ts","../src/lib/utils/keyboard.ts","../src/lib/utils/media.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nimport { KeyboardEventKey } from '../types'\n\nconst normalizeKey = (key: string): string => {\n if (key.length === 1 && /[a-z]/i.test(key)) {\n return key.toUpperCase()\n }\n return key\n}\n\nexport const useKeyBinding = (keys: KeyboardEventKey[], cb?: () => void) => {\n const pressedKeys = useRef<Set<string>>(new Set())\n const cbRef = useRef(cb)\n\n cbRef.current = cb\n\n useEffect(() => {\n const keysSet = new Set(keys)\n\n const checkMatch = () => {\n if (keysSet.size !== pressedKeys.current.size) {\n return false\n }\n\n for (const key of keysSet) {\n if (!pressedKeys.current.has(key)) {\n return false\n }\n }\n\n return true\n }\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const key = normalizeKey(e.key)\n pressedKeys.current.add(key)\n\n if (checkMatch() && cbRef.current) {\n e.preventDefault()\n cbRef.current()\n }\n }\n\n const handleKeyUp = (e: KeyboardEvent) => {\n const key = normalizeKey(e.key)\n pressedKeys.current.delete(key)\n }\n\n const handleBlur = () => {\n pressedKeys.current.clear()\n }\n\n window.addEventListener('keydown', handleKeyDown)\n window.addEventListener('keyup', handleKeyUp)\n window.addEventListener('blur', handleBlur)\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n window.removeEventListener('keyup', handleKeyUp)\n window.removeEventListener('blur', handleBlur)\n }\n }, [keys])\n}\n","export const toHEX = (n: number): string => {\n const clamped = Math.max(0, Math.min(100, n))\n const value = Math.round((clamped / 100) * 255)\n\n return value.toString(16).padStart(2, '0')\n}\n\nexport const isValid = (hexColor: string): boolean => {\n return /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hexColor)\n}\n\nexport const alpha = (hexColor: string, percentage: number): string => {\n if (!isValid(hexColor)) {\n return '#000000FF'\n }\n\n const hex = hexColor.replace('#', '').slice(0, 6)\n const alphaHex = toHEX(percentage)\n\n return `#${hex}${alphaHex}`\n}\n","import { Browser, OperatingSystem } from '../types'\n\nexport const getOperatingSystem = (): OperatingSystem => {\n if (typeof navigator === 'undefined') {\n return 'unknown'\n }\n\n const ua = navigator.userAgent.toLowerCase()\n\n if (/iphone|ipad|ipod/.test(ua)) return 'ios'\n if (/android/.test(ua)) return 'android'\n if (/mac/.test(ua)) return 'macos'\n if (/win/.test(ua)) return 'windows'\n if (/linux/.test(ua)) return 'linux'\n\n return 'unknown'\n}\n\nexport const getBrowser = (): Browser => {\n if (typeof navigator === 'undefined') {\n return 'unknown'\n }\n\n const ua = navigator.userAgent.toLowerCase()\n\n if (/edg/.test(ua)) return 'edge'\n if (/opr|opera/.test(ua)) return 'opera'\n if (/chrome/.test(ua)) return 'chrome'\n if (/safari/.test(ua)) return 'safari'\n if (/firefox/.test(ua)) return 'firefox'\n\n return 'unknown'\n}\n","import { keyframes } from '@emotion/react'\n\nimport { KeyboardEventKey } from './types'\n\nexport const BREAKPOINTS = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n '2xl': 1536,\n} as const\n\nexport const COLORS = {\n black: '#212529',\n white: '#ffffff',\n red: '#C1121F',\n green: '#16a34a',\n yellow: '#ffb703',\n gray: '#e5e7eb',\n 'steel-blue': '#0582ca',\n 'iron-grey': '#495057',\n 'baltic-blue': '#1e6091',\n} as const\n\nexport const KEYFRAMES = {\n rotate: keyframes`\n to {\n transform: rotate(1turn);\n }\n `,\n fadeIn: keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n `,\n fadeOut: keyframes`\n from { opacity: 1; }\n to { opacity: 0; }\n `,\n slideInLeft: keyframes`\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n `,\n slideOutLeft: keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(-100%); }\n `,\n slideInRight: keyframes`\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n `,\n slideOutRight: keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(100%); }\n `,\n slideInTop: keyframes`\n from { transform: translateY(-100%); }\n to { transform: translateY(0); }\n `,\n slideOutTop: keyframes`\n from { transform: translateY(0); }\n to { transform: translateY(-100%); }\n `,\n slideInBottom: keyframes`\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n `,\n slideOutBottom: keyframes`\n from { transform: translateY(0); }\n to { transform: translateY(100%); }\n `,\n scaleIn: keyframes`\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n `,\n}\n\nexport const KEY_SYMBOLS: Partial<Record<KeyboardEventKey, { mac: string; other: string }>> = {\n // Modifiers\n Meta: { mac: '⌘', other: 'Win' },\n Control: { mac: '⌃', other: 'Ctrl' },\n Alt: { mac: '⌥', other: 'Alt' },\n Shift: { mac: '⇧', other: '⇧' },\n\n // Navigation\n ArrowUp: { mac: '↑', other: '↑' },\n ArrowDown: { mac: '↓', other: '↓' },\n ArrowLeft: { mac: '←', other: '←' },\n ArrowRight: { mac: '→', other: '→' },\n Home: { mac: '↖', other: '↖' },\n End: { mac: '↘', other: '↘' },\n PageUp: { mac: '⇞', other: '⇞' },\n PageDown: { mac: '⇟', other: '⇟' },\n\n // Whitespace & Enter\n ' ': { mac: '␣', other: '␣' },\n Enter: { mac: 'Enter', other: 'Enter' },\n Tab: { mac: '⇥', other: '⇥' },\n\n // Editing\n Backspace: { mac: '⌫', other: '⌫' },\n Delete: { mac: '⌦', other: '⌦' },\n Escape: { mac: 'Esc', other: 'Esc' },\n Insert: { mac: 'Ins', other: 'Ins' },\n\n // System\n CapsLock: { mac: '⇪', other: '⇪' },\n NumLock: { mac: '⇭', other: '⇭' },\n}\n","import { getOperatingSystem } from './platform'\nimport { KEY_SYMBOLS } from '../constants'\nimport { KeyboardEventKey } from '../types'\n\nexport const getKeySymbols = (keys?: KeyboardEventKey[]): string[] => {\n if (!keys) {\n return []\n }\n\n const os = getOperatingSystem()\n\n return keys.map((key) => {\n const symbol = KEY_SYMBOLS[key]\n\n if (!symbol) {\n return key\n }\n\n return os === 'macos' ? symbol.mac : symbol.other\n })\n}\n","import { BREAKPOINTS } from '../constants'\n\ntype Breakpoint = keyof typeof BREAKPOINTS\n\nexport const mediaUp = (bp: Breakpoint) => {\n return `@media (min-width: ${BREAKPOINTS[bp]}px)`\n}\n\nexport const mediaDown = (bp: Breakpoint) => {\n return `@media (max-width: ${BREAKPOINTS[bp] - 1}px)`\n}\n\nexport const mediaBetween = (min: Breakpoint, max: Breakpoint) => {\n return `@media (min-width: ${BREAKPOINTS[min]}px) and (max-width: ${BREAKPOINTS[max] - 1}px)`\n}\n"],"names":["normalizeKey","key","useKeyBinding","keys","cb","pressedKeys","useRef","cbRef","useEffect","keysSet","checkMatch","handleKeyDown","e","handleKeyUp","handleBlur","toHEX","n","clamped","isValid","hexColor","alpha","percentage","hex","alphaHex","getOperatingSystem","ua","getBrowser","BREAKPOINTS","COLORS","KEYFRAMES","keyframes","KEY_SYMBOLS","getKeySymbols","os","symbol","mediaUp","bp","mediaDown","mediaBetween","min","max"],"mappings":"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"}
|
package/dist/media-OVL6YjWb.cjs
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";const m=require("react"),t=require("@emotion/react"),d=e=>e.length===1&&/[a-z]/i.test(e)?e.toUpperCase():e,k=(e,n)=>{const r=m.useRef(new Set),a=m.useRef(n);a.current=n,m.useEffect(()=>{const c=new Set(e),g=()=>{if(c.size!==r.current.size)return!1;for(const o of c)if(!r.current.has(o))return!1;return!0},f=o=>{const i=d(o.key);r.current.add(i),g()&&a.current&&(o.preventDefault(),a.current())},u=o=>{const i=d(o.key);r.current.delete(i)},l=()=>{r.current.clear()};return window.addEventListener("keydown",f),window.addEventListener("keyup",u),window.addEventListener("blur",l),()=>{window.removeEventListener("keydown",f),window.removeEventListener("keyup",u),window.removeEventListener("blur",l)}},[e])},h=e=>{const n=Math.max(0,Math.min(100,e));return Math.round(n/100*255).toString(16).padStart(2,"0")},w=e=>/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e),E=(e,n)=>{if(!w(e))return"#000000FF";const r=e.replace("#","").slice(0,6),a=h(n);return`#${r}${a}`},p=()=>{if(typeof navigator>"u")return"unknown";const e=navigator.userAgent.toLowerCase();return/iphone|ipad|ipod/.test(e)?"ios":/android/.test(e)?"android":/mac/.test(e)?"macos":/win/.test(e)?"windows":/linux/.test(e)?"linux":"unknown"},S=()=>{if(typeof navigator>"u")return"unknown";const e=navigator.userAgent.toLowerCase();return/edg/.test(e)?"edge":/opr|opera/.test(e)?"opera":/chrome/.test(e)?"chrome":/safari/.test(e)?"safari":/firefox/.test(e)?"firefox":"unknown"},s={sm:640,md:768,lg:1024,xl:1280,"2xl":1536},L={black:"#212529",white:"#ffffff",red:"#C1121F",green:"#16a34a",yellow:"#ffb703",gray:"#e5e7eb","steel-blue":"#0582ca","iron-grey":"#495057","baltic-blue":"#1e6091"},v={rotate:t.keyframes`
|
|
2
|
-
to {
|
|
3
|
-
transform: rotate(1turn);
|
|
4
|
-
}
|
|
5
|
-
`,fadeIn:t.keyframes`
|
|
6
|
-
from { opacity: 0; }
|
|
7
|
-
to { opacity: 1; }
|
|
8
|
-
`,fadeOut:t.keyframes`
|
|
9
|
-
from { opacity: 1; }
|
|
10
|
-
to { opacity: 0; }
|
|
11
|
-
`,slideInLeft:t.keyframes`
|
|
12
|
-
from { transform: translateX(-100%); }
|
|
13
|
-
to { transform: translateX(0); }
|
|
14
|
-
`,slideOutLeft:t.keyframes`
|
|
15
|
-
from { transform: translateX(0); }
|
|
16
|
-
to { transform: translateX(-100%); }
|
|
17
|
-
`,slideInRight:t.keyframes`
|
|
18
|
-
from { transform: translateX(100%); }
|
|
19
|
-
to { transform: translateX(0); }
|
|
20
|
-
`,slideOutRight:t.keyframes`
|
|
21
|
-
from { transform: translateX(0); }
|
|
22
|
-
to { transform: translateX(100%); }
|
|
23
|
-
`,slideInTop:t.keyframes`
|
|
24
|
-
from { transform: translateY(-100%); }
|
|
25
|
-
to { transform: translateY(0); }
|
|
26
|
-
`,slideOutTop:t.keyframes`
|
|
27
|
-
from { transform: translateY(0); }
|
|
28
|
-
to { transform: translateY(-100%); }
|
|
29
|
-
`,slideInBottom:t.keyframes`
|
|
30
|
-
from { transform: translateY(100%); }
|
|
31
|
-
to { transform: translateY(0); }
|
|
32
|
-
`,slideOutBottom:t.keyframes`
|
|
33
|
-
from { transform: translateY(0); }
|
|
34
|
-
to { transform: translateY(100%); }
|
|
35
|
-
`,scaleIn:t.keyframes`
|
|
36
|
-
from { opacity: 0; transform: scale(0.95); }
|
|
37
|
-
to { opacity: 1; transform: scale(1); }
|
|
38
|
-
`},y={Meta:{mac:"⌘",other:"Win"},Control:{mac:"⌃",other:"Ctrl"},Alt:{mac:"⌥",other:"Alt"},Shift:{mac:"⇧",other:"⇧"},ArrowUp:{mac:"↑",other:"↑"},ArrowDown:{mac:"↓",other:"↓"},ArrowLeft:{mac:"←",other:"←"},ArrowRight:{mac:"→",other:"→"},Home:{mac:"↖",other:"↖"},End:{mac:"↘",other:"↘"},PageUp:{mac:"⇞",other:"⇞"},PageDown:{mac:"⇟",other:"⇟"}," ":{mac:"␣",other:"␣"},Enter:{mac:"Enter",other:"Enter"},Tab:{mac:"⇥",other:"⇥"},Backspace:{mac:"⌫",other:"⌫"},Delete:{mac:"⌦",other:"⌦"},Escape:{mac:"Esc",other:"Esc"},Insert:{mac:"Ins",other:"Ins"},CapsLock:{mac:"⇪",other:"⇪"},NumLock:{mac:"⇭",other:"⇭"}},O=e=>{if(!e)return[];const n=p();return e.map(r=>{const a=y[r];return a?n==="macos"?a.mac:a.other:r})},x=e=>`@media (min-width: ${s[e]}px)`,B=e=>`@media (max-width: ${s[e]-1}px)`,K=(e,n)=>`@media (min-width: ${s[e]}px) and (max-width: ${s[n]-1}px)`;exports.BREAKPOINTS=s;exports.COLORS=L;exports.KEYFRAMES=v;exports.KEY_SYMBOLS=y;exports.alpha=E;exports.getBrowser=S;exports.getKeySymbols=O;exports.getOperatingSystem=p;exports.isValid=w;exports.mediaBetween=K;exports.mediaDown=B;exports.mediaUp=x;exports.toHEX=h;exports.useKeyBinding=k;
|
|
39
|
-
//# sourceMappingURL=media-OVL6YjWb.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-OVL6YjWb.cjs","sources":["../src/lib/hooks/useKeyBinding.ts","../src/lib/utils/colors.ts","../src/lib/utils/platform.ts","../src/lib/constants.ts","../src/lib/utils/keyboard.ts","../src/lib/utils/media.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nimport { KeyboardEventKey } from '../types'\n\nconst normalizeKey = (key: string): string => {\n if (key.length === 1 && /[a-z]/i.test(key)) {\n return key.toUpperCase()\n }\n return key\n}\n\nexport const useKeyBinding = (keys: KeyboardEventKey[], cb?: () => void) => {\n const pressedKeys = useRef<Set<string>>(new Set())\n const cbRef = useRef(cb)\n\n cbRef.current = cb\n\n useEffect(() => {\n const keysSet = new Set(keys)\n\n const checkMatch = () => {\n if (keysSet.size !== pressedKeys.current.size) {\n return false\n }\n\n for (const key of keysSet) {\n if (!pressedKeys.current.has(key)) {\n return false\n }\n }\n\n return true\n }\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const key = normalizeKey(e.key)\n pressedKeys.current.add(key)\n\n if (checkMatch() && cbRef.current) {\n e.preventDefault()\n cbRef.current()\n }\n }\n\n const handleKeyUp = (e: KeyboardEvent) => {\n const key = normalizeKey(e.key)\n pressedKeys.current.delete(key)\n }\n\n const handleBlur = () => {\n pressedKeys.current.clear()\n }\n\n window.addEventListener('keydown', handleKeyDown)\n window.addEventListener('keyup', handleKeyUp)\n window.addEventListener('blur', handleBlur)\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n window.removeEventListener('keyup', handleKeyUp)\n window.removeEventListener('blur', handleBlur)\n }\n }, [keys])\n}\n","export const toHEX = (n: number): string => {\n const clamped = Math.max(0, Math.min(100, n))\n const value = Math.round((clamped / 100) * 255)\n\n return value.toString(16).padStart(2, '0')\n}\n\nexport const isValid = (hexColor: string): boolean => {\n return /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hexColor)\n}\n\nexport const alpha = (hexColor: string, percentage: number): string => {\n if (!isValid(hexColor)) {\n return '#000000FF'\n }\n\n const hex = hexColor.replace('#', '').slice(0, 6)\n const alphaHex = toHEX(percentage)\n\n return `#${hex}${alphaHex}`\n}\n","import { Browser, OperatingSystem } from '../types'\n\nexport const getOperatingSystem = (): OperatingSystem => {\n if (typeof navigator === 'undefined') {\n return 'unknown'\n }\n\n const ua = navigator.userAgent.toLowerCase()\n\n if (/iphone|ipad|ipod/.test(ua)) return 'ios'\n if (/android/.test(ua)) return 'android'\n if (/mac/.test(ua)) return 'macos'\n if (/win/.test(ua)) return 'windows'\n if (/linux/.test(ua)) return 'linux'\n\n return 'unknown'\n}\n\nexport const getBrowser = (): Browser => {\n if (typeof navigator === 'undefined') {\n return 'unknown'\n }\n\n const ua = navigator.userAgent.toLowerCase()\n\n if (/edg/.test(ua)) return 'edge'\n if (/opr|opera/.test(ua)) return 'opera'\n if (/chrome/.test(ua)) return 'chrome'\n if (/safari/.test(ua)) return 'safari'\n if (/firefox/.test(ua)) return 'firefox'\n\n return 'unknown'\n}\n","import { keyframes } from '@emotion/react'\n\nimport { KeyboardEventKey } from './types'\n\nexport const BREAKPOINTS = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n '2xl': 1536,\n} as const\n\nexport const COLORS = {\n black: '#212529',\n white: '#ffffff',\n red: '#C1121F',\n green: '#16a34a',\n yellow: '#ffb703',\n gray: '#e5e7eb',\n 'steel-blue': '#0582ca',\n 'iron-grey': '#495057',\n 'baltic-blue': '#1e6091',\n} as const\n\nexport const KEYFRAMES = {\n rotate: keyframes`\n to {\n transform: rotate(1turn);\n }\n `,\n fadeIn: keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n `,\n fadeOut: keyframes`\n from { opacity: 1; }\n to { opacity: 0; }\n `,\n slideInLeft: keyframes`\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n `,\n slideOutLeft: keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(-100%); }\n `,\n slideInRight: keyframes`\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n `,\n slideOutRight: keyframes`\n from { transform: translateX(0); }\n to { transform: translateX(100%); }\n `,\n slideInTop: keyframes`\n from { transform: translateY(-100%); }\n to { transform: translateY(0); }\n `,\n slideOutTop: keyframes`\n from { transform: translateY(0); }\n to { transform: translateY(-100%); }\n `,\n slideInBottom: keyframes`\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n `,\n slideOutBottom: keyframes`\n from { transform: translateY(0); }\n to { transform: translateY(100%); }\n `,\n scaleIn: keyframes`\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n `,\n}\n\nexport const KEY_SYMBOLS: Partial<Record<KeyboardEventKey, { mac: string; other: string }>> = {\n // Modifiers\n Meta: { mac: '⌘', other: 'Win' },\n Control: { mac: '⌃', other: 'Ctrl' },\n Alt: { mac: '⌥', other: 'Alt' },\n Shift: { mac: '⇧', other: '⇧' },\n\n // Navigation\n ArrowUp: { mac: '↑', other: '↑' },\n ArrowDown: { mac: '↓', other: '↓' },\n ArrowLeft: { mac: '←', other: '←' },\n ArrowRight: { mac: '→', other: '→' },\n Home: { mac: '↖', other: '↖' },\n End: { mac: '↘', other: '↘' },\n PageUp: { mac: '⇞', other: '⇞' },\n PageDown: { mac: '⇟', other: '⇟' },\n\n // Whitespace & Enter\n ' ': { mac: '␣', other: '␣' },\n Enter: { mac: 'Enter', other: 'Enter' },\n Tab: { mac: '⇥', other: '⇥' },\n\n // Editing\n Backspace: { mac: '⌫', other: '⌫' },\n Delete: { mac: '⌦', other: '⌦' },\n Escape: { mac: 'Esc', other: 'Esc' },\n Insert: { mac: 'Ins', other: 'Ins' },\n\n // System\n CapsLock: { mac: '⇪', other: '⇪' },\n NumLock: { mac: '⇭', other: '⇭' },\n}\n","import { getOperatingSystem } from './platform'\nimport { KEY_SYMBOLS } from '../constants'\nimport { KeyboardEventKey } from '../types'\n\nexport const getKeySymbols = (keys?: KeyboardEventKey[]): string[] => {\n if (!keys) {\n return []\n }\n\n const os = getOperatingSystem()\n\n return keys.map((key) => {\n const symbol = KEY_SYMBOLS[key]\n\n if (!symbol) {\n return key\n }\n\n return os === 'macos' ? symbol.mac : symbol.other\n })\n}\n","import { BREAKPOINTS } from '../constants'\n\ntype Breakpoint = keyof typeof BREAKPOINTS\n\nexport const mediaUp = (bp: Breakpoint) => {\n return `@media (min-width: ${BREAKPOINTS[bp]}px)`\n}\n\nexport const mediaDown = (bp: Breakpoint) => {\n return `@media (max-width: ${BREAKPOINTS[bp] - 1}px)`\n}\n\nexport const mediaBetween = (min: Breakpoint, max: Breakpoint) => {\n return `@media (min-width: ${BREAKPOINTS[min]}px) and (max-width: ${BREAKPOINTS[max] - 1}px)`\n}\n"],"names":["normalizeKey","key","useKeyBinding","keys","cb","pressedKeys","useRef","cbRef","useEffect","keysSet","checkMatch","handleKeyDown","e","handleKeyUp","handleBlur","toHEX","n","clamped","isValid","hexColor","alpha","percentage","hex","alphaHex","getOperatingSystem","ua","getBrowser","BREAKPOINTS","COLORS","KEYFRAMES","keyframes","KEY_SYMBOLS","getKeySymbols","os","symbol","mediaUp","bp","mediaDown","mediaBetween","min","max"],"mappings":"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"}
|