@vacano/ui 1.0.0 → 1.2.1

package/dist/lib.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./media-OVL6YjWb.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;
+//# sourceMappingURL=lib.cjs.map

package/dist/lib.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib.d.ts

@@ -0,0 +1,161 @@
+import { Ref } from 'react';
+
+export declare const alpha: (hexColor: string, percentage: number) => string;
+
+declare type Breakpoint = keyof typeof BREAKPOINTS;
+
+export declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+
+export declare type Browser = 'chrome' | 'firefox' | 'safari' | 'edge' | 'opera' | 'unknown';
+
+export declare const COLORS: {
+    readonly black: "#212529";
+    readonly white: "#ffffff";
+    readonly red: "#C1121F";
+    readonly green: "#16a34a";
+    readonly yellow: "#ffb703";
+    readonly gray: "#e5e7eb";
+    readonly 'steel-blue': "#0582ca";
+    readonly 'iron-grey': "#495057";
+    readonly 'baltic-blue': "#1e6091";
+};
+
+export declare const getBrowser: () => Browser;
+
+export declare const getKeySymbols: (keys?: KeyboardEventKey[]) => string[];
+
+export declare const getOperatingSystem: () => OperatingSystem;
+
+export declare const isValid: (hexColor: string) => boolean;
+
+export declare const KEY_SYMBOLS: Partial<Record<KeyboardEventKey, {
+    mac: string;
+    other: string;
+}>>;
+
+/**
+ * Keyboard key values based on KeyboardEvent.key
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+ */
+export declare type KeyboardEventKey = 'Meta' | 'Control' | 'Alt' | 'Shift' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' | 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End' | 'PageUp' | 'PageDown' | ' ' | 'Enter' | 'Tab' | 'Backspace' | 'Delete' | 'Insert' | 'Escape' | '`' | '-' | '=' | '[' | ']' | '\\' | ';' | "'" | ',' | '.' | '/' | 'NumLock' | 'NumpadEnter' | 'NumpadAdd' | 'NumpadSubtract' | 'NumpadMultiply' | 'NumpadDivide' | 'NumpadDecimal' | 'Numpad0' | 'Numpad1' | 'Numpad2' | 'Numpad3' | 'Numpad4' | 'Numpad5' | 'Numpad6' | 'Numpad7' | 'Numpad8' | 'Numpad9' | 'CapsLock' | 'ScrollLock' | 'Pause' | 'PrintScreen' | 'ContextMenu';
+
+export declare const KEYFRAMES: {
+    rotate: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    fadeIn: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    fadeOut: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideInLeft: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideOutLeft: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideInRight: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideOutRight: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideInTop: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideOutTop: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideInBottom: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideOutBottom: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    scaleIn: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+};
+
+export declare const mediaBetween: (min: Breakpoint, max: Breakpoint) => string;
+
+export declare const mediaDown: (bp: Breakpoint) => string;
+
+export declare const mediaUp: (bp: Breakpoint) => string;
+
+export declare const newClassNameGetter: (name: string) => (element: string, ...classNames: Array<string | undefined>) => string;
+
+export declare type OperatingSystem = 'windows' | 'macos' | 'linux' | 'ios' | 'android' | 'unknown';
+
+export declare const toHEX: (n: number) => string;
+
+export declare const useKeyBinding: (keys: KeyboardEventKey[], cb?: () => void) => void;
+
+export declare type VacanoComponentClassNames<T> = T;
+
+export declare type VacanoComponentProps<E extends HTMLElement | null, T extends Record<string, string> = Record<string, never>> = {
+    'data-test-id'?: string;
+    className?: string;
+    classnames?: VacanoComponentClassNames<T>;
+    ref?: Ref<E>;
+};
+
+export declare type VacanoComponentSize = 'compact' | 'default';
+
+export declare type VacanoInteractiveElementState = {
+    active?: string;
+    disabled?: string;
+    hover?: string;
+    static?: string;
+};
+
+export declare type VacanoValueItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+
+export { }

package/dist/lib.js

@@ -0,0 +1,20 @@
+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-BR6nutcO.js";
+import { n as l } from "./tooling-YDHxmiMT.js";
+export {
+  s as BREAKPOINTS,
+  t as COLORS,
+  i as KEYFRAMES,
+  m as KEY_SYMBOLS,
+  o as alpha,
+  r as getBrowser,
+  n as getKeySymbols,
+  S as getOperatingSystem,
+  d as isValid,
+  g as mediaBetween,
+  B as mediaDown,
+  K as mediaUp,
+  l as newClassNameGetter,
+  p as toHEX,
+  E as useKeyBinding
+};
+//# sourceMappingURL=lib.js.map

package/dist/lib.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/media-BR6nutcO.js

@@ -0,0 +1,162 @@
+import { useRef as l, useEffect as p } from "react";
+import { keyframes as e } from "@emotion/react";
+const d = (t) => t.length === 1 && /[a-z]/i.test(t) ? t.toUpperCase() : t, L = (t, n) => {
+  const r = l(/* @__PURE__ */ new Set()), a = l(n);
+  a.current = n, p(() => {
+    const c = new Set(t), h = () => {
+      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), h() && a.current && (o.preventDefault(), a.current());
+    }, m = (o) => {
+      const i = d(o.key);
+      r.current.delete(i);
+    }, u = () => {
+      r.current.clear();
+    };
+    return window.addEventListener("keydown", f), window.addEventListener("keyup", m), window.addEventListener("blur", u), () => {
+      window.removeEventListener("keydown", f), window.removeEventListener("keyup", m), window.removeEventListener("blur", u);
+    };
+  }, [t]);
+}, w = (t) => {
+  const n = Math.max(0, Math.min(100, t));
+  return Math.round(n / 100 * 255).toString(16).padStart(2, "0");
+}, g = (t) => /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t), k = (t, n) => {
+  if (!g(t))
+    return "#000000FF";
+  const r = t.replace("#", "").slice(0, 6), a = w(n);
+  return `#${r}${a}`;
+}, y = () => {
+  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";
+}, S = () => {
+  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
+}, b = {
+  black: "#212529",
+  white: "#ffffff",
+  red: "#C1121F",
+  green: "#16a34a",
+  yellow: "#ffb703",
+  gray: "#e5e7eb",
+  "steel-blue": "#0582ca",
+  "iron-grey": "#495057",
+  "baltic-blue": "#1e6091"
+}, Y = {
+  rotate: e`
+    to {
+      transform: rotate(1turn);
+    }
+  `,
+  fadeIn: e`
+    from { opacity: 0; }
+    to { opacity: 1; }
+  `,
+  fadeOut: e`
+    from { opacity: 1; }
+    to { opacity: 0; }
+  `,
+  slideInLeft: e`
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  `,
+  slideOutLeft: e`
+    from { transform: translateX(0); }
+    to { transform: translateX(-100%); }
+  `,
+  slideInRight: e`
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  `,
+  slideOutRight: e`
+    from { transform: translateX(0); }
+    to { transform: translateX(100%); }
+  `,
+  slideInTop: e`
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  `,
+  slideOutTop: e`
+    from { transform: translateY(0); }
+    to { transform: translateY(-100%); }
+  `,
+  slideInBottom: e`
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  `,
+  slideOutBottom: e`
+    from { transform: translateY(0); }
+    to { transform: translateY(100%); }
+  `,
+  scaleIn: e`
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  `
+}, E = {
+  // Modifiers
+  Meta: { mac: "⌘", other: "Win" },
+  Control: { mac: "⌃", other: "Ctrl" },
+  Alt: { mac: "⌥", other: "Alt" },
+  Shift: { mac: "⇧", other: "⇧" },
+  // Navigation
+  ArrowUp: { mac: "↑", other: "↑" },
+  ArrowDown: { mac: "↓", other: "↓" },
+  ArrowLeft: { mac: "←", other: "←" },
+  ArrowRight: { mac: "→", other: "→" },
+  Home: { mac: "↖", other: "↖" },
+  End: { mac: "↘", other: "↘" },
+  PageUp: { mac: "⇞", other: "⇞" },
+  PageDown: { mac: "⇟", other: "⇟" },
+  // Whitespace & Enter
+  " ": { mac: "␣", other: "␣" },
+  Enter: { mac: "Enter", other: "Enter" },
+  Tab: { mac: "⇥", other: "⇥" },
+  // Editing
+  Backspace: { mac: "⌫", other: "⌫" },
+  Delete: { mac: "⌦", other: "⌦" },
+  Escape: { mac: "Esc", other: "Esc" },
+  Insert: { mac: "Ins", other: "Ins" },
+  // System
+  CapsLock: { mac: "⇪", other: "⇪" },
+  NumLock: { mac: "⇭", other: "⇭" }
+}, A = (t) => {
+  if (!t)
+    return [];
+  const n = y();
+  return t.map((r) => {
+    const a = E[r];
+    return a ? n === "macos" ? a.mac : a.other : r;
+  });
+}, B = (t) => `@media (min-width: ${s[t]}px)`, I = (t) => `@media (max-width: ${s[t] - 1}px)`, K = (t, n) => `@media (min-width: ${s[t]}px) and (max-width: ${s[n] - 1}px)`;
+export {
+  s as B,
+  b as C,
+  Y as K,
+  k as a,
+  I as b,
+  K as c,
+  y as d,
+  S as e,
+  E as f,
+  A as g,
+  g as i,
+  B as m,
+  w as t,
+  L as u
+};
+//# sourceMappingURL=media-BR6nutcO.js.map

package/dist/media-BR6nutcO.js.map

@@ -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

@@ -0,0 +1,39 @@
+"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`
+    to {
+      transform: rotate(1turn);
+    }
+  `,fadeIn:t.keyframes`
+    from { opacity: 0; }
+    to { opacity: 1; }
+  `,fadeOut:t.keyframes`
+    from { opacity: 1; }
+    to { opacity: 0; }
+  `,slideInLeft:t.keyframes`
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  `,slideOutLeft:t.keyframes`
+    from { transform: translateX(0); }
+    to { transform: translateX(-100%); }
+  `,slideInRight:t.keyframes`
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  `,slideOutRight:t.keyframes`
+    from { transform: translateX(0); }
+    to { transform: translateX(100%); }
+  `,slideInTop:t.keyframes`
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  `,slideOutTop:t.keyframes`
+    from { transform: translateY(0); }
+    to { transform: translateY(-100%); }
+  `,slideInBottom:t.keyframes`
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  `,slideOutBottom:t.keyframes`
+    from { transform: translateY(0); }
+    to { transform: translateY(100%); }
+  `,scaleIn:t.keyframes`
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  `},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;
+//# sourceMappingURL=media-OVL6YjWb.cjs.map

package/dist/media-OVL6YjWb.cjs.map

@@ -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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"}

package/dist/tooling-Dflq0Y98.cjs

@@ -0,0 +1,2 @@
+"use strict";function a(r){var e,n,t="";if(typeof r=="string"||typeof r=="number")t+=r;else if(typeof r=="object")if(Array.isArray(r)){var s=r.length;for(e=0;e<s;e++)r[e]&&(n=a(r[e]))&&(t&&(t+=" "),t+=n)}else for(n in r)r[n]&&(t&&(t+=" "),t+=n);return t}function o(){for(var r,e,n=0,t="",s=arguments.length;n<s;n++)(r=arguments[n])&&(e=a(r))&&(t&&(t+=" "),t+=e);return t}const f="vacano",i=r=>(e,...n)=>o(`${f}_${r}_${e}`,...n);exports.newClassNameGetter=i;
+//# sourceMappingURL=tooling-Dflq0Y98.cjs.map

package/dist/tooling-Dflq0Y98.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooling-Dflq0Y98.cjs","sources":["../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","../src/lib/utils/tooling.ts"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import clsx from 'clsx'\n\nconst COMPONENTS_PREFIX = 'vacano'\n\nexport const newClassNameGetter =\n  (name: string) =>\n  (element: string, ...classNames: Array<string | undefined>) => {\n    return clsx(`${COMPONENTS_PREFIX}_${name}_${element}`, ...classNames)\n  }\n"],"names":["r","e","t","f","n","o","clsx","COMPONENTS_PREFIX","newClassNameGetter","name","element","classNames"],"mappings":"aAAA,SAASA,EAAEC,EAAE,CAAC,IAAIC,EAAEC,EAAEC,EAAE,GAAG,GAAa,OAAOH,GAAjB,UAA8B,OAAOA,GAAjB,SAAmBG,GAAGH,UAAoB,OAAOA,GAAjB,SAAmB,GAAG,MAAM,QAAQA,CAAC,EAAE,CAAC,IAAII,EAAEJ,EAAE,OAAO,IAAIC,EAAE,EAAEA,EAAEG,EAAEH,IAAID,EAAEC,CAAC,IAAIC,EAAEH,EAAEC,EAAEC,CAAC,CAAC,KAAKE,IAAIA,GAAG,KAAKA,GAAGD,EAAE,KAAM,KAAIA,KAAKF,EAAEA,EAAEE,CAAC,IAAIC,IAAIA,GAAG,KAAKA,GAAGD,GAAG,OAAOC,CAAC,CAAQ,SAASE,GAAM,CAAC,QAAQL,EAAEC,EAAEC,EAAE,EAAEC,EAAE,GAAGC,EAAE,UAAU,OAAOF,EAAEE,EAAEF,KAAKF,EAAE,UAAUE,CAAC,KAAKD,EAAEF,EAAEC,CAAC,KAAKG,IAAIA,GAAG,KAAKA,GAAGF,GAAG,OAAOE,CAAC,CCE/W,MAAMG,EAAoB,SAEbC,EACVC,GACD,CAACC,KAAoBC,IACZL,EAAK,GAAGC,CAAiB,IAAIE,CAAI,IAAIC,CAAO,GAAI,GAAGC,CAAU","x_google_ignoreList":[0]}

package/dist/tooling-YDHxmiMT.js

@@ -0,0 +1,18 @@
+function s(r) {
+  var o, n, t = "";
+  if (typeof r == "string" || typeof r == "number") t += r;
+  else if (typeof r == "object") if (Array.isArray(r)) {
+    var a = r.length;
+    for (o = 0; o < a; o++) r[o] && (n = s(r[o])) && (t && (t += " "), t += n);
+  } else for (n in r) r[n] && (t && (t += " "), t += n);
+  return t;
+}
+function e() {
+  for (var r, o, n = 0, t = "", a = arguments.length; n < a; n++) (r = arguments[n]) && (o = s(r)) && (t && (t += " "), t += o);
+  return t;
+}
+const f = "vacano", i = (r) => (o, ...n) => e(`${f}_${r}_${o}`, ...n);
+export {
+  i as n
+};
+//# sourceMappingURL=tooling-YDHxmiMT.js.map

package/dist/tooling-YDHxmiMT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooling-YDHxmiMT.js","sources":["../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","../src/lib/utils/tooling.ts"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import clsx from 'clsx'\n\nconst COMPONENTS_PREFIX = 'vacano'\n\nexport const newClassNameGetter =\n  (name: string) =>\n  (element: string, ...classNames: Array<string | undefined>) => {\n    return clsx(`${COMPONENTS_PREFIX}_${name}_${element}`, ...classNames)\n  }\n"],"names":["r","e","t","f","n","o","clsx","COMPONENTS_PREFIX","newClassNameGetter","name","element","classNames"],"mappings":"AAAA,SAASA,EAAEC,GAAE;AAAC,MAAIC,GAAEC,GAAEC,IAAE;AAAG,MAAa,OAAOH,KAAjB,YAA8B,OAAOA,KAAjB,SAAmB,CAAAG,KAAGH;AAAA,WAAoB,OAAOA,KAAjB,SAAmB,KAAG,MAAM,QAAQA,CAAC,GAAE;AAAC,QAAII,IAAEJ,EAAE;AAAO,SAAIC,IAAE,GAAEA,IAAEG,GAAEH,IAAI,CAAAD,EAAEC,CAAC,MAAIC,IAAEH,EAAEC,EAAEC,CAAC,CAAC,OAAKE,MAAIA,KAAG,MAAKA,KAAGD;AAAA,EAAE,MAAM,MAAIA,KAAKF,EAAE,CAAAA,EAAEE,CAAC,MAAIC,MAAIA,KAAG,MAAKA,KAAGD;AAAG,SAAOC;AAAC;AAAQ,SAASE,IAAM;AAAC,WAAQL,GAAEC,GAAEC,IAAE,GAAEC,IAAE,IAAGC,IAAE,UAAU,QAAOF,IAAEE,GAAEF,IAAI,EAACF,IAAE,UAAUE,CAAC,OAAKD,IAAEF,EAAEC,CAAC,OAAKG,MAAIA,KAAG,MAAKA,KAAGF;AAAG,SAAOE;AAAC;ACE/W,MAAMG,IAAoB,UAEbC,IACX,CAACC,MACD,CAACC,MAAoBC,MACZL,EAAK,GAAGC,CAAiB,IAAIE,CAAI,IAAIC,CAAO,IAAI,GAAGC,CAAU;","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vacano/ui",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "description": "Vacano React components library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -26,63 +26,22 @@
         "types": "./dist/icons.d.cts",
         "default": "./dist/icons.cjs"
       }
+    },
+    "./lib": {
+      "import": {
+        "types": "./dist/lib.d.ts",
+        "default": "./dist/lib.js"
+      },
+      "require": {
+        "types": "./dist/lib.d.cts",
+        "default": "./dist/lib.cjs"
+      }
     }
   },
   "files": [
     "dist"
   ],
   "sideEffects": false,
-  "peerDependencies": {
-    "@emotion/react": "^11.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "dependencies": {
-    "@emotion/styled": "^11.14.1",
-    "@floating-ui/react": "^0.27.16",
-    "@lordicon/react": "^1.11.0",
-    "@tanstack/react-virtual": "^3.13.13",
-    "clsx": "^2.1.1",
-    "lottie-web": "^5.13.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.3",
-    "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.39.2",
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
-    "@storybook/addon-a11y": "^10.1.10",
-    "@storybook/addon-docs": "^10.1.10",
-    "@storybook/addon-onboarding": "^10.1.10",
-    "@storybook/addon-vitest": "^10.1.10",
-    "@storybook/react-vite": "^10.1.10",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.1",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.0.0",
-    "@vitest/coverage-v8": "^3.0.0",
-    "eslint": "^9.39.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^10.1.10",
-    "husky": "^9.1.7",
-    "jsdom": "^25.0.1",
-    "lint-staged": "^15.2.11",
-    "playwright": "^1.57.0",
-    "prettier": "^3.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "storybook": "^10.1.10",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.50.1",
-    "vite": "^6.0.6",
-    "vite-plugin-dts": "^4.4.0",
-    "vitepress": "^1.5.0",
-    "vitest": "^3.0.0"
-  },
   "engines": {
     "node": ">=22.0.0",
     "pnpm": ">=9.0.0"
@@ -117,7 +76,11 @@
       "",
       "<THIRD_PARTY_MODULES>",
       "",
-      "^[./]"
+      "^\\./",
+      "^\\.\\./(?!\\.)",
+      "^\\.\\./\\.\\./(?!\\.)",
+      "^\\.\\./\\.\\./\\.\\./(?!\\.)",
+      "^\\.\\./\\.\\./\\.\\./\\.\\./"
     ]
   },
   "lint-staged": {
@@ -126,20 +89,61 @@
       "prettier --write"
     ]
   },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@emotion/styled": "^11.14.1",
+    "@tanstack/react-virtual": "^3.13.13",
+    "clsx": "^2.1.1",
+    "hq-cropper": "^4.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@emotion/react": "^11.14.0",
+    "@eslint/js": "^9.39.2",
+    "@fontsource/inter": "^5.2.8",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-onboarding": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^10.1.10",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.2.11",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^10.1.10",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.50.1",
+    "vite": "^6.0.6",
+    "vite-plugin-dts": "^4.4.0",
+    "vitepress": "^1.5.0",
+    "vitest": "^4.0.16"
+  },
   "scripts": {
     "build": "vite build",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage",
+    "build-storybook": "STORYBOOK_BASE=/storybook/ storybook build -o docs/public/storybook",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run"
   }
 }