soliq-design-system 1.0.2

package/dist/NotFound/NotFound.d.ts

@@ -0,0 +1,20 @@
+import type { MouseEventHandler } from "react";
+type NotFoundMode = "light" | "dark" | "auto";
+export interface NotFoundProps {
+    mode?: NotFoundMode;
+    fullScreen?: boolean;
+    title?: string;
+    subtitle?: string;
+    actionLabel?: string;
+    brandLabel?: string;
+    showCountdown?: boolean;
+    countdownText?: string;
+    countdownSeconds?: number;
+    autoRedirectOnEnd?: boolean;
+    onCountdownEnd?: () => void;
+    onActionClick?: MouseEventHandler<HTMLButtonElement>;
+    actionHref?: string;
+    className?: string;
+}
+export declare function NotFound({ mode, fullScreen, title, subtitle, actionLabel, brandLabel, showCountdown, countdownText, countdownSeconds, autoRedirectOnEnd, onCountdownEnd, onActionClick, actionHref, className }: NotFoundProps): import("react").JSX.Element;
+export {};

package/dist/NotFound/NotFound.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import logoUrl from "../assets/images/logo.svg";
+import { styles } from "./NotFound.styles";
+function QuestionIcon() {
+    return (_jsxs("svg", { className: "not-found__icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M12 16.2V18.2", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }), _jsx("path", { d: "M9.6 9.8C9.6 8.47 10.67 7.4 12 7.4C13.33 7.4 14.4 8.47 14.4 9.8C14.4 10.64 13.97 11.28 13.05 11.87C12.28 12.37 12 12.76 12 13.5V14", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })] }));
+}
+export function NotFound({ mode = "auto", fullScreen = true, title = "САҲИФА ТОПИЛМАДИ", subtitle = "Сўралган саҳифа манзили нотўғри ёки у ўчирилган бўлиши мумкин.", actionLabel = "БОШ САҲИФАГА ҚАЙТИШ", brandLabel = "ДАВЛАТ СОЛИҚ ҚЎМИТАСИ", showCountdown = false, countdownText = "ичида бош саҳифага ўтасиз", countdownSeconds = 60, autoRedirectOnEnd = false, onCountdownEnd, onActionClick, actionHref, className }) {
+    const fullClass = fullScreen ? " not-found--fullscreen" : "";
+    const userClass = className ? ` ${className}` : "";
+    const [isVisible, setIsVisible] = useState(false);
+    const hiddenClass = isVisible ? "" : " not-found--hidden";
+    const safeCountdownSeconds = Math.max(1, countdownSeconds);
+    const [remainingSeconds, setRemainingSeconds] = useState(safeCountdownSeconds);
+    const handledEndRef = useRef(false);
+    useEffect(() => {
+        setRemainingSeconds(safeCountdownSeconds);
+        handledEndRef.current = false;
+    }, [safeCountdownSeconds]);
+    useEffect(() => {
+        const rafId = window.requestAnimationFrame(() => {
+            setIsVisible(true);
+        });
+        return () => window.cancelAnimationFrame(rafId);
+    }, []);
+    useEffect(() => {
+        if (!showCountdown || remainingSeconds <= 0 || handledEndRef.current) {
+            return;
+        }
+        const timeoutId = window.setTimeout(() => {
+            setRemainingSeconds((prev) => Math.max(prev - 1, 0));
+        }, 1000);
+        return () => window.clearTimeout(timeoutId);
+    }, [remainingSeconds, showCountdown]);
+    useEffect(() => {
+        if (!showCountdown || remainingSeconds > 0 || handledEndRef.current) {
+            return;
+        }
+        handledEndRef.current = true;
+        onCountdownEnd?.();
+        if (!autoRedirectOnEnd) {
+            return;
+        }
+        if (actionHref) {
+            window.location.assign(actionHref);
+        }
+        else {
+            window.location.assign("/");
+        }
+    }, [remainingSeconds, autoRedirectOnEnd, showCountdown, actionHref, onCountdownEnd]);
+    const countdownProgress = (remainingSeconds / safeCountdownSeconds) * 100;
+    const countdownStyle = {
+        "--countdown-progress": countdownProgress
+    };
+    return (_jsxs("div", { className: `not-found${fullClass}${hiddenClass}${userClass}`, "data-mode": mode, "aria-hidden": !isVisible, children: [_jsx("style", { children: styles }), _jsxs("div", { className: "not-found__top", children: [_jsx("img", { className: "not-found__logo", src: logoUrl, alt: "" }), _jsx("p", { className: "not-found__brand", children: brandLabel })] }), _jsxs("div", { className: "not-found__center", children: [_jsxs("div", { className: "not-found__mark-wrap", children: [_jsx("div", { className: "not-found__halo" }), _jsxs("svg", { className: "not-found__rings", width: "198", height: "198", viewBox: "0 0 198 198", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { className: "not-found__ring-inner", cx: "99", cy: "99", r: "76", stroke: "var(--line)", strokeWidth: "0.9", strokeDasharray: "4 12" }), _jsx("circle", { className: "not-found__ring-outer", cx: "99", cy: "99", r: "88", stroke: "var(--line)", strokeWidth: "0.7", strokeDasharray: "2 22" })] }), _jsx("div", { className: "not-found__orb", children: _jsx(QuestionIcon, {}) })] }), _jsx("p", { className: "not-found__title", children: title }), _jsx("p", { className: "not-found__subtitle", children: subtitle }), _jsx("div", { className: "not-found__actions", children: actionHref ? (_jsxs("a", { className: "not-found__action", href: actionHref, children: [actionLabel, _jsx("svg", { className: "not-found__action-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H19M13 6L19 12L13 18", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round" }) })] })) : (_jsxs("button", { className: "not-found__action", type: "button", onClick: onActionClick, children: [actionLabel, _jsx("svg", { className: "not-found__action-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H19M13 6L19 12L13 18", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round" }) })] })) }), showCountdown && (_jsxs("p", { className: "not-found__countdown", children: [_jsx("span", { className: "not-found__countdown-dot", style: countdownStyle }), remainingSeconds, "s ", countdownText] }))] })] }));
+}

package/dist/NotFound/NotFound.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles = "\n.not-found {\n  --bg: #f8fafc;\n  --title: #0f172a;\n  --muted: #64748b;\n  --primary: #0b4f8a;\n  --primary-hover: #0a4578;\n  --action-bg: rgba(233, 241, 252, 0.92);\n  --action-bg-hover: rgba(224, 235, 249, 0.96);\n  --action-text: #0b4f8a;\n  --action-border: rgba(11, 79, 138, 0.34);\n  --line: rgba(15, 23, 42, 0.14);\n  --soft-line: rgba(11, 79, 138, 0.2);\n  --halo: rgba(11, 79, 138, 0.16);\n  --shadow: rgba(15, 23, 42, 0.16);\n  width: 100%;\n  min-height: 560px;\n  position: relative;\n  overflow: hidden;\n  background:\n    radial-gradient(circle at 50% 42%, var(--halo), transparent 42%),\n    var(--bg);\n  font-family: Inter, system-ui, sans-serif;\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.not-found--fullscreen {\n  position: fixed;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n  min-height: 100vh;\n  z-index: 9998;\n}\n\n.not-found--hidden {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.not-found[data-mode=\"dark\"] {\n  --bg: #020f25;\n  --title: #d7e5f4;\n  --muted: #7f97b5;\n  --primary: #2f73bb;\n  --primary-hover: #3f83ca;\n  --action-bg: rgba(23, 43, 75, 0.88);\n  --action-bg-hover: rgba(25, 48, 84, 0.92);\n  --action-text: #8bb5e2;\n  --action-border: rgba(74, 122, 184, 0.45);\n  --line: rgba(130, 167, 210, 0.2);\n  --soft-line: rgba(130, 167, 210, 0.22);\n  --halo: rgba(19, 73, 138, 0.26);\n  --shadow: rgba(0, 0, 0, 0.36);\n}\n\n@media (prefers-color-scheme: dark) {\n  .not-found[data-mode=\"auto\"] {\n    --bg: #020f25;\n    --title: #d7e5f4;\n    --muted: #7f97b5;\n    --primary: #2f73bb;\n    --primary-hover: #3f83ca;\n    --action-bg: rgba(23, 43, 75, 0.88);\n    --action-bg-hover: rgba(25, 48, 84, 0.92);\n    --action-text: #8bb5e2;\n    --action-border: rgba(74, 122, 184, 0.45);\n    --line: rgba(130, 167, 210, 0.2);\n    --soft-line: rgba(130, 167, 210, 0.22);\n    --halo: rgba(19, 73, 138, 0.26);\n    --shadow: rgba(0, 0, 0, 0.36);\n  }\n}\n\n.not-found__top {\n  position: absolute;\n  top: 18px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: grid;\n  place-items: center;\n  gap: 4px;\n  z-index: 2;\n  opacity: 0;\n  transform: translate(-50%, -10px);\n  animation: not-found-top-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;\n}\n\n.not-found__logo {\n  width: 30px;\n  height: auto;\n  opacity: 0.9;\n  margin-bottom: 5px;\n}\n\n.not-found__brand {\n  margin: 0;\n  color: var(--muted);\n  font-size: 9px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n.not-found__center {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: min(340px, calc(100vw - 40px));\n  text-align: center;\n}\n\n.not-found__halo {\n  position: absolute;\n  inset: -70px -40px -30px;\n  border-radius: 50%;\n  background: radial-gradient(circle, var(--halo), transparent 70%);\n  filter: blur(4px);\n  pointer-events: none;\n}\n\n.not-found__mark-wrap {\n  position: relative;\n  margin: 0 auto 18px;\n  width: 198px;\n  height: 198px;\n  display: grid;\n  place-items: center;\n  opacity: 0;\n  transform: translateY(-8px);\n  animation: not-found-drop-in 760ms cubic-bezier(0.22, 1, 0.36, 1) 420ms forwards;\n}\n\n.not-found__rings {\n  position: absolute;\n  inset: 0;\n  animation: fade-in 0.8s ease both;\n}\n\n.not-found__ring-inner {\n  transform-origin: 99px 99px;\n  animation: spin-ccw 20s linear infinite;\n}\n\n.not-found__ring-outer {\n  transform-origin: 99px 99px;\n  animation: spin-cw 32s linear infinite;\n}\n\n.not-found__orb {\n  width: 82px;\n  height: 82px;\n  border-radius: 999px;\n  border: 1px solid var(--soft-line);\n  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));\n  display: grid;\n  place-items: center;\n  box-shadow: 0 10px 22px var(--shadow);\n  animation: orb-pulse 2.6s ease-in-out infinite;\n}\n\n.not-found__icon {\n  width: 34px;\n  height: 34px;\n  color: var(--title);\n}\n\n.not-found__title {\n  margin: 0;\n  color: var(--title);\n  font-size: 24px;\n  line-height: 1.25;\n  font-weight: 620;\n  letter-spacing: 0.02em;\n  text-transform: uppercase;\n  opacity: 0;\n  transform: translateY(-8px);\n  animation: not-found-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 680ms forwards;\n}\n\n.not-found__subtitle {\n  margin: 8px 0 0;\n  color: var(--muted);\n  font-size: 13px;\n  line-height: 1.45;\n  max-width: 300px;\n  margin-left: auto;\n  margin-right: auto;\n  opacity: 0;\n  transform: translateY(-8px);\n  animation: not-found-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 920ms forwards;\n}\n\n.not-found__actions {\n  margin-top: 18px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  opacity: 0;\n  transform: translateY(-8px);\n  animation: not-found-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 1140ms forwards;\n}\n\n.not-found__action {\n  border: 1px solid var(--action-border);\n  border-radius: 8px;\n  padding: 8px 12px;\n  width: auto;\n  font-size: clamp(10px, 1.5vw, 12px);\n  font-weight: 700;\n  letter-spacing: 0.03em;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--action-text);\n  background: var(--action-bg);\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  line-height: 1;\n  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms ease;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);\n}\n\n.not-found__action:hover {\n  border-color: var(--primary-hover);\n  background: var(--action-bg-hover);\n  transform: translateY(-1px);\n}\n\n.not-found__action:active {\n  transform: translateY(0);\n}\n\n.not-found__action:focus-visible {\n  outline: 2px solid #8bb5de;\n  outline-offset: 2px;\n}\n\n.not-found__action-icon {\n  width: clamp(12px, 1.5vw, 16px);\n  height: clamp(12px, 1.5vw, 16px);\n  display: inline-block;\n}\n\n.not-found__countdown {\n  margin: 14px 0 0;\n  color: var(--muted);\n  font-size: 12px;\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  opacity: 0;\n  transform: translateY(-8px);\n  animation: not-found-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 1360ms forwards;\n}\n\n.not-found__countdown-dot {\n  width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  background: conic-gradient(\n    from -90deg,\n    var(--muted) calc(var(--countdown-progress, 0) * 1%),\n    rgba(130, 167, 210, 0.28) 0\n  );\n  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);\n  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);\n  position: relative;\n}\n\n.not-found__countdown-dot::before {\n  content: \"\";\n  position: absolute;\n  inset: 5px;\n  border-radius: 999px;\n  background: #d8c1aa;\n  opacity: 0.9;\n}\n\n@keyframes spin-cw {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes spin-ccw {\n  to { transform: rotate(-360deg); }\n}\n\n@keyframes fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes not-found-drop-in {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes not-found-top-drop-in {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -10px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, 0);\n  }\n}\n\n@keyframes orb-pulse {\n  0%, 100% {\n    box-shadow:\n      0 10px 22px var(--shadow),\n      0 0 0 0 rgba(47, 115, 187, 0.22);\n  }\n  50% {\n    box-shadow:\n      0 12px 26px var(--shadow),\n      0 0 0 10px rgba(47, 115, 187, 0.06);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .not-found__top,\n  .not-found__mark-wrap,\n  .not-found__title,\n  .not-found__subtitle,\n  .not-found__actions,\n  .not-found__countdown {\n    animation: none !important;\n    opacity: 1;\n    transform: none;\n  }\n}\n";

package/dist/NotFound/NotFound.styles.js

@@ -0,0 +1,346 @@
+export const styles = `
+.not-found {
+  --bg: #f8fafc;
+  --title: #0f172a;
+  --muted: #64748b;
+  --primary: #0b4f8a;
+  --primary-hover: #0a4578;
+  --action-bg: rgba(233, 241, 252, 0.92);
+  --action-bg-hover: rgba(224, 235, 249, 0.96);
+  --action-text: #0b4f8a;
+  --action-border: rgba(11, 79, 138, 0.34);
+  --line: rgba(15, 23, 42, 0.14);
+  --soft-line: rgba(11, 79, 138, 0.2);
+  --halo: rgba(11, 79, 138, 0.16);
+  --shadow: rgba(15, 23, 42, 0.16);
+  width: 100%;
+  min-height: 560px;
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% 42%, var(--halo), transparent 42%),
+    var(--bg);
+  font-family: Inter, system-ui, sans-serif;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.not-found--fullscreen {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  min-height: 100vh;
+  z-index: 9998;
+}
+
+.not-found--hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.not-found[data-mode="dark"] {
+  --bg: #020f25;
+  --title: #d7e5f4;
+  --muted: #7f97b5;
+  --primary: #2f73bb;
+  --primary-hover: #3f83ca;
+  --action-bg: rgba(23, 43, 75, 0.88);
+  --action-bg-hover: rgba(25, 48, 84, 0.92);
+  --action-text: #8bb5e2;
+  --action-border: rgba(74, 122, 184, 0.45);
+  --line: rgba(130, 167, 210, 0.2);
+  --soft-line: rgba(130, 167, 210, 0.22);
+  --halo: rgba(19, 73, 138, 0.26);
+  --shadow: rgba(0, 0, 0, 0.36);
+}
+
+@media (prefers-color-scheme: dark) {
+  .not-found[data-mode="auto"] {
+    --bg: #020f25;
+    --title: #d7e5f4;
+    --muted: #7f97b5;
+    --primary: #2f73bb;
+    --primary-hover: #3f83ca;
+    --action-bg: rgba(23, 43, 75, 0.88);
+    --action-bg-hover: rgba(25, 48, 84, 0.92);
+    --action-text: #8bb5e2;
+    --action-border: rgba(74, 122, 184, 0.45);
+    --line: rgba(130, 167, 210, 0.2);
+    --soft-line: rgba(130, 167, 210, 0.22);
+    --halo: rgba(19, 73, 138, 0.26);
+    --shadow: rgba(0, 0, 0, 0.36);
+  }
+}
+
+.not-found__top {
+  position: absolute;
+  top: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: grid;
+  place-items: center;
+  gap: 4px;
+  z-index: 2;
+  opacity: 0;
+  transform: translate(-50%, -10px);
+  animation: not-found-top-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
+}
+
+.not-found__logo {
+  width: 30px;
+  height: auto;
+  opacity: 0.9;
+  margin-bottom: 5px;
+}
+
+.not-found__brand {
+  margin: 0;
+  color: var(--muted);
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.not-found__center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(340px, calc(100vw - 40px));
+  text-align: center;
+}
+
+.not-found__halo {
+  position: absolute;
+  inset: -70px -40px -30px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--halo), transparent 70%);
+  filter: blur(4px);
+  pointer-events: none;
+}
+
+.not-found__mark-wrap {
+  position: relative;
+  margin: 0 auto 18px;
+  width: 198px;
+  height: 198px;
+  display: grid;
+  place-items: center;
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: not-found-drop-in 760ms cubic-bezier(0.22, 1, 0.36, 1) 420ms forwards;
+}
+
+.not-found__rings {
+  position: absolute;
+  inset: 0;
+  animation: fade-in 0.8s ease both;
+}
+
+.not-found__ring-inner {
+  transform-origin: 99px 99px;
+  animation: spin-ccw 20s linear infinite;
+}
+
+.not-found__ring-outer {
+  transform-origin: 99px 99px;
+  animation: spin-cw 32s linear infinite;
+}
+
+.not-found__orb {
+  width: 82px;
+  height: 82px;
+  border-radius: 999px;
+  border: 1px solid var(--soft-line);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
+  display: grid;
+  place-items: center;
+  box-shadow: 0 10px 22px var(--shadow);
+  animation: orb-pulse 2.6s ease-in-out infinite;
+}
+
+.not-found__icon {
+  width: 34px;
+  height: 34px;
+  color: var(--title);
+}
+
+.not-found__title {
+  margin: 0;
+  color: var(--title);
+  font-size: 24px;
+  line-height: 1.25;
+  font-weight: 620;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: not-found-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 680ms forwards;
+}
+
+.not-found__subtitle {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+  max-width: 300px;
+  margin-left: auto;
+  margin-right: auto;
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: not-found-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 920ms forwards;
+}
+
+.not-found__actions {
+  margin-top: 18px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: not-found-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 1140ms forwards;
+}
+
+.not-found__action {
+  border: 1px solid var(--action-border);
+  border-radius: 8px;
+  padding: 8px 12px;
+  width: auto;
+  font-size: clamp(10px, 1.5vw, 12px);
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--action-text);
+  background: var(--action-bg);
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  line-height: 1;
+  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms ease;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.not-found__action:hover {
+  border-color: var(--primary-hover);
+  background: var(--action-bg-hover);
+  transform: translateY(-1px);
+}
+
+.not-found__action:active {
+  transform: translateY(0);
+}
+
+.not-found__action:focus-visible {
+  outline: 2px solid #8bb5de;
+  outline-offset: 2px;
+}
+
+.not-found__action-icon {
+  width: clamp(12px, 1.5vw, 16px);
+  height: clamp(12px, 1.5vw, 16px);
+  display: inline-block;
+}
+
+.not-found__countdown {
+  margin: 14px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: not-found-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 1360ms forwards;
+}
+
+.not-found__countdown-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: conic-gradient(
+    from -90deg,
+    var(--muted) calc(var(--countdown-progress, 0) * 1%),
+    rgba(130, 167, 210, 0.28) 0
+  );
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
+  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
+  position: relative;
+}
+
+.not-found__countdown-dot::before {
+  content: "";
+  position: absolute;
+  inset: 5px;
+  border-radius: 999px;
+  background: #d8c1aa;
+  opacity: 0.9;
+}
+
+@keyframes spin-cw {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes spin-ccw {
+  to { transform: rotate(-360deg); }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes not-found-drop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes not-found-top-drop-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -10px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+
+@keyframes orb-pulse {
+  0%, 100% {
+    box-shadow:
+      0 10px 22px var(--shadow),
+      0 0 0 0 rgba(47, 115, 187, 0.22);
+  }
+  50% {
+    box-shadow:
+      0 12px 26px var(--shadow),
+      0 0 0 10px rgba(47, 115, 187, 0.06);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .not-found__top,
+  .not-found__mark-wrap,
+  .not-found__title,
+  .not-found__subtitle,
+  .not-found__actions,
+  .not-found__countdown {
+    animation: none !important;
+    opacity: 1;
+    transform: none;
+  }
+}
+`;

package/dist/NotFound/index.d.ts

@@ -0,0 +1 @@
+export * from "./NotFound";

package/dist/NotFound/index.js

@@ -0,0 +1 @@
+export * from "./NotFound";

package/dist/NotFound.d.ts

@@ -0,0 +1 @@
+export * from "./NotFound/index";

package/dist/NotFound.js

@@ -0,0 +1 @@
+export * from "./NotFound/index";

package/dist/SessionExpired/SessionExpired.d.ts

@@ -0,0 +1,20 @@
+import type { MouseEventHandler } from "react";
+type SessionExpiredMode = "light" | "dark" | "auto";
+export interface SessionExpiredProps {
+    mode?: SessionExpiredMode;
+    fullScreen?: boolean;
+    title?: string;
+    subtitle?: string;
+    actionLabel?: string;
+    brandLabel?: string;
+    countdownText?: string;
+    showCountdown?: boolean;
+    countdownSeconds?: number;
+    autoCloseOnEnd?: boolean;
+    onCountdownEnd?: () => void;
+    onActionClick?: MouseEventHandler<HTMLButtonElement>;
+    actionHref?: string;
+    className?: string;
+}
+export declare function SessionExpired({ mode, fullScreen, title, subtitle, actionLabel, brandLabel, countdownText, showCountdown, countdownSeconds, autoCloseOnEnd, onCountdownEnd, onActionClick, actionHref, className }: SessionExpiredProps): import("react").JSX.Element;
+export {};

package/dist/SessionExpired/SessionExpired.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import logoUrl from "../assets/images/logo.svg";
+import { styles } from "./SessionExpired.styles";
+function SessionIcon() {
+    return (_jsxs("svg", { className: "session-expired__icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M12 3.2L18.5 6V11.9C18.5 16.2 15.8 19.7 12 20.9C8.2 19.7 5.5 16.2 5.5 11.9V6L12 3.2Z", stroke: "currentColor", strokeWidth: "1.6" }), _jsx("path", { d: "M12 8.3V12.3", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "14.9", r: "0.9", fill: "currentColor" })] }));
+}
+export function SessionExpired({ mode = "auto", fullScreen = true, title = "СЕССИЯ ТУГАДИ", subtitle = "Хавфсизлик сабабли сиз тизимдан автоматик чиқарилдингиз.", actionLabel = "ТИЗИМГА КИРИШ", brandLabel = "ДАВЛАТ СОЛИҚ ҚЎМИТАСИ", countdownText = "ичида саҳифадан чиқасиз", showCountdown = true, countdownSeconds = 60, autoCloseOnEnd = true, onCountdownEnd, onActionClick, actionHref, className }) {
+    const fullClass = fullScreen ? " session-expired--fullscreen" : "";
+    const userClass = className ? ` ${className}` : "";
+    const [isVisible, setIsVisible] = useState(false);
+    const hiddenClass = isVisible ? "" : " session-expired--hidden";
+    const safeCountdownSeconds = Math.max(1, countdownSeconds);
+    const [remainingSeconds, setRemainingSeconds] = useState(safeCountdownSeconds);
+    const handledEndRef = useRef(false);
+    useEffect(() => {
+        setRemainingSeconds(safeCountdownSeconds);
+        handledEndRef.current = false;
+    }, [safeCountdownSeconds]);
+    useEffect(() => {
+        const rafId = window.requestAnimationFrame(() => {
+            setIsVisible(true);
+        });
+        return () => window.cancelAnimationFrame(rafId);
+    }, []);
+    useEffect(() => {
+        if (!showCountdown || remainingSeconds <= 0 || handledEndRef.current) {
+            return;
+        }
+        const timeoutId = window.setTimeout(() => {
+            setRemainingSeconds((prev) => Math.max(prev - 1, 0));
+        }, 1000);
+        return () => window.clearTimeout(timeoutId);
+    }, [remainingSeconds, showCountdown]);
+    useEffect(() => {
+        if (!showCountdown || remainingSeconds > 0 || handledEndRef.current) {
+            return;
+        }
+        handledEndRef.current = true;
+        onCountdownEnd?.();
+        if (!autoCloseOnEnd) {
+            return;
+        }
+        window.close();
+        window.setTimeout(() => {
+            if (!window.closed) {
+                window.location.replace("about:blank");
+            }
+        }, 120);
+    }, [remainingSeconds, autoCloseOnEnd, onCountdownEnd, showCountdown]);
+    const countdownProgress = (remainingSeconds / safeCountdownSeconds) * 100;
+    const countdownStyle = {
+        "--countdown-progress": countdownProgress
+    };
+    return (_jsxs("div", { className: `session-expired${fullClass}${hiddenClass}${userClass}`, "data-mode": mode, "aria-hidden": !isVisible, children: [_jsx("style", { children: styles }), _jsxs("div", { className: "session-expired__top", children: [_jsx("img", { className: "session-expired__logo", src: logoUrl, alt: "" }), _jsx("p", { className: "session-expired__brand", children: brandLabel })] }), _jsxs("div", { className: "session-expired__center", children: [_jsxs("div", { className: "session-expired__lock-wrap", children: [_jsx("div", { className: "session-expired__halo" }), _jsxs("svg", { className: "session-expired__rings", width: "198", height: "198", viewBox: "0 0 198 198", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { className: "session-expired__ring-inner", cx: "99", cy: "99", r: "76", stroke: "var(--line)", strokeWidth: "0.9", strokeDasharray: "4 12" }), _jsx("circle", { className: "session-expired__ring-outer", cx: "99", cy: "99", r: "88", stroke: "var(--line)", strokeWidth: "0.7", strokeDasharray: "2 22" })] }), _jsx("div", { className: "session-expired__lock-orb", children: _jsx(SessionIcon, {}) })] }), _jsx("p", { className: "session-expired__title", children: title }), _jsx("p", { className: "session-expired__subtitle", children: subtitle }), _jsx("div", { className: "session-expired__actions", children: actionHref ? (_jsxs("a", { className: "session-expired__action", href: actionHref, children: [actionLabel, _jsx("svg", { className: "session-expired__action-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H19M13 6L19 12L13 18", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round" }) })] })) : (_jsxs("button", { className: "session-expired__action", type: "button", onClick: onActionClick, children: [actionLabel, _jsx("svg", { className: "session-expired__action-icon", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M5 12H19M13 6L19 12L13 18", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round" }) })] })) }), showCountdown && (_jsxs("p", { className: "session-expired__countdown", children: [_jsx("span", { className: "session-expired__countdown-dot", style: countdownStyle }), remainingSeconds, "s ", countdownText] }))] })] }));
+}

package/dist/SessionExpired/SessionExpired.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles = "\n.session-expired {\n  --bg: #f8fafc;\n  --panel: #ffffff;\n  --title: #0f172a;\n  --muted: #64748b;\n  --primary: #0b4f8a;\n  --primary-hover: #0a4578;\n  --action-bg: rgba(233, 241, 252, 0.92);\n  --action-bg-hover: rgba(224, 235, 249, 0.96);\n  --action-text: #0b4f8a;\n  --action-border: rgba(11, 79, 138, 0.34);\n  --line: rgba(15, 23, 42, 0.14);\n  --soft-line: rgba(11, 79, 138, 0.2);\n  --halo: rgba(11, 79, 138, 0.16);\n  --chip: rgba(15, 23, 42, 0.04);\n  --chip-border: rgba(15, 23, 42, 0.1);\n  --shadow: rgba(15, 23, 42, 0.16);\n  width: 100%;\n  min-height: 560px;\n  position: relative;\n  overflow: hidden;\n  background:\n    radial-gradient(circle at 50% 42%, var(--halo), transparent 42%),\n    var(--bg);\n  font-family: Inter, system-ui, sans-serif;\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.session-expired--fullscreen {\n  position: fixed;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n  min-height: 100vh;\n  z-index: 9998;\n}\n\n.session-expired--hidden {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.session-expired[data-mode=\"dark\"] {\n  --bg: #020f25;\n  --panel: rgba(5, 20, 42, 0.58);\n  --title: #d7e5f4;\n  --muted: #7f97b5;\n  --primary: #2f73bb;\n  --primary-hover: #3f83ca;\n  --action-bg: rgba(23, 43, 75, 0.88);\n  --action-bg-hover: rgba(25, 48, 84, 0.92);\n  --action-text: #8bb5e2;\n  --action-border: rgba(74, 122, 184, 0.45);\n  --line: rgba(130, 167, 210, 0.2);\n  --soft-line: rgba(130, 167, 210, 0.22);\n  --halo: rgba(19, 73, 138, 0.26);\n  --chip: rgba(129, 167, 209, 0.09);\n  --chip-border: rgba(129, 167, 209, 0.16);\n  --shadow: rgba(0, 0, 0, 0.36);\n}\n\n@media (prefers-color-scheme: dark) {\n  .session-expired[data-mode=\"auto\"] {\n    --bg: #020f25;\n    --panel: rgba(5, 20, 42, 0.58);\n    --title: #d7e5f4;\n    --muted: #7f97b5;\n    --primary: #2f73bb;\n    --primary-hover: #3f83ca;\n    --action-bg: rgba(23, 43, 75, 0.88);\n    --action-bg-hover: rgba(25, 48, 84, 0.92);\n    --action-text: #8bb5e2;\n    --action-border: rgba(74, 122, 184, 0.45);\n    --line: rgba(130, 167, 210, 0.2);\n    --soft-line: rgba(130, 167, 210, 0.22);\n    --halo: rgba(19, 73, 138, 0.26);\n    --chip: rgba(129, 167, 209, 0.09);\n    --chip-border: rgba(129, 167, 209, 0.16);\n    --shadow: rgba(0, 0, 0, 0.36);\n  }\n}\n\n.session-expired__top {\n  position: absolute;\n  top: 18px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: grid;\n  place-items: center;\n  gap: 4px;\n  z-index: 2;\n  opacity: 0;\n  transform: translate(-50%, -10px);\n  animation: session-expired-top-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;\n}\n\n.session-expired__logo {\n  width: 30px;\n  height: auto;\n  opacity: 0.9;\n  margin-bottom: 5px;\n}\n\n.session-expired__brand {\n  margin: 0;\n  color: var(--muted);\n  font-size: 9px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n.session-expired__center {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: min(340px, calc(100vw - 40px));\n  text-align: center;\n}\n\n.session-expired__halo {\n  position: absolute;\n  inset: -70px -40px -30px;\n  border-radius: 50%;\n  background: radial-gradient(circle, var(--halo), transparent 70%);\n  filter: blur(4px);\n  pointer-events: none;\n}\n\n.session-expired__lock-wrap {\n  position: relative;\n  margin: 0 auto 18px;\n  width: 198px;\n  height: 198px;\n  display: grid;\n  place-items: center;\n  opacity: 0;\n  transform: translateY(-8px);\n  animation: session-expired-drop-in 760ms cubic-bezier(0.22, 1, 0.36, 1) 420ms forwards;\n}\n\n.session-expired__rings {\n  position: absolute;\n  inset: 0;\n  animation: fade-in 0.8s ease both;\n}\n\n.session-expired__ring-inner {\n  transform-origin: 99px 99px;\n  animation: spin-ccw 20s linear infinite;\n}\n\n.session-expired__ring-outer {\n  transform-origin: 99px 99px;\n  animation: spin-cw 32s linear infinite;\n}\n\n.session-expired__lock-orb {\n  width: 82px;\n  height: 82px;\n  border-radius: 999px;\n  border: 1px solid var(--soft-line);\n  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));\n  display: grid;\n  place-items: center;\n  box-shadow: 0 10px 22px var(--shadow);\n  animation: orb-pulse 2.6s ease-in-out infinite;\n}\n\n.session-expired__icon {\n  width: 34px;\n  height: 34px;\n  color: var(--title);\n}\n\n.session-expired__title {\n  margin: 0;\n  color: var(--title);\n  font-size: 24px;\n  line-height: 1.25;\n  font-weight: 620;\n  letter-spacing: 0.02em;\n  text-transform: uppercase;\n  opacity: 0;\n  transform: translateY(-8px);\n  animation: session-expired-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 680ms forwards;\n}\n\n.session-expired__subtitle {\n  margin: 8px 0 0;\n  color: var(--muted);\n  font-size: 13px;\n  line-height: 1.45;\n  max-width: 300px;\n  margin-left: auto;\n  margin-right: auto;\n  opacity: 0;\n  transform: translateY(-8px);\n  animation: session-expired-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 920ms forwards;\n}\n\n.session-expired__actions {\n  margin-top: 18px;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  opacity: 0;\n  transform: translateY(-8px);\n  animation: session-expired-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 1140ms forwards;\n}\n\n.session-expired__action {\n  border: 1px solid var(--action-border);\n  border-radius: 8px;\n  padding: 8px 12px;\n  width: auto;\n  font-size: clamp(10px, 1.5vw, 12px);\n  font-weight: 700;\n  letter-spacing: 0.03em;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--action-text);\n  background: var(--action-bg);\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  line-height: 1;\n  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms ease;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);\n}\n\n.session-expired__action:hover {\n  border-color: var(--primary-hover);\n  background: var(--action-bg-hover);\n  transform: translateY(-1px);\n}\n\n.session-expired__action:active {\n  transform: translateY(0);\n}\n\n.session-expired__action:focus-visible {\n  outline: 2px solid #8bb5de;\n  outline-offset: 2px;\n}\n\n.session-expired__action-icon {\n  width: clamp(12px, 1.5vw, 16px);\n  height: clamp(12px, 1.5vw, 16px);\n  display: inline-block;\n}\n\n.session-expired__countdown {\n  margin: 14px 0 0;\n  color: var(--muted);\n  font-size: 12px;\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  opacity: 0;\n  transform: translateY(-8px);\n  animation: session-expired-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 1360ms forwards;\n}\n\n.session-expired__countdown-dot {\n  width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  background: conic-gradient(\n    from -90deg,\n    var(--muted) calc(var(--countdown-progress, 0) * 1%),\n    rgba(130, 167, 210, 0.28) 0\n  );\n  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);\n  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);\n  position: relative;\n}\n\n.session-expired__countdown-dot::before {\n  content: \"\";\n  position: absolute;\n  inset: 5px;\n  border-radius: 999px;\n  background: #d8c1aa;\n  opacity: 0.9;\n}\n\n@keyframes spin-cw {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes spin-ccw {\n  to { transform: rotate(-360deg); }\n}\n\n@keyframes fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes session-expired-drop-in {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes session-expired-top-drop-in {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -10px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, 0);\n  }\n}\n\n@keyframes orb-pulse {\n  0%, 100% {\n    box-shadow:\n      0 10px 22px var(--shadow),\n      0 0 0 0 rgba(47, 115, 187, 0.22);\n  }\n  50% {\n    box-shadow:\n      0 12px 26px var(--shadow),\n      0 0 0 10px rgba(47, 115, 187, 0.06);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .session-expired__top,\n  .session-expired__lock-wrap,\n  .session-expired__title,\n  .session-expired__subtitle,\n  .session-expired__actions,\n  .session-expired__countdown {\n    animation: none !important;\n    opacity: 1;\n    transform: none;\n  }\n}\n";