@korioinc/next-core 2.0.6 → 2.0.8

package/dist/components/locale-switcher/index.js

@@ -65,5 +65,5 @@ export default function LocaleSwitcher({ languages } = {}) {
     if (!currentLanguage) {
         return null;
     }
-    return (_jsxs(Menu, { as: 'div', className: 'relative', children: [_jsx(MenuButton, { className: 'border-glass bg-glass hover:bg-glass-backdrop relative inline-flex h-9 w-9 items-center justify-center rounded-md border transition-colors', children: currentLanguage.flag }), _jsx(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95', children: _jsx(MenuItems, { anchor: 'bottom end', className: 'glass-backdrop border-glass z-50 w-36 rounded-md border ring-1 ring-black/5 [--anchor-gap:4px] focus:outline-none', children: _jsx("div", { className: 'py-1', children: availableLanguages.map((language) => (_jsx(MenuItem, { children: _jsxs("button", { onClick: () => changeLanguage(language.code), className: 'data-[focus]:bg-glass-backdrop text-foreground group flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors', children: [language.flag, _jsx("span", { children: language.name }), currentLocale === language.code && (_jsx("svg", { className: 'ml-auto h-4 w-4', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', children: _jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M5 13l4 4L19 7' }) }))] }) }, language.code))) }) }) })] }));
+    return (_jsxs(Menu, { as: 'div', className: 'relative', children: [_jsx(MenuButton, { className: 'border-glass bg-glass hover:bg-glass-tinted relative inline-flex h-9 w-9 items-center justify-center rounded-md border transition-colors', children: currentLanguage.flag }), _jsx(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95', children: _jsx(MenuItems, { anchor: 'bottom end', className: 'glass-tinted glass-backdrop border-glass z-50 w-36 rounded-md border ring-1 ring-black/5 [--anchor-gap:4px] focus:outline-none', children: _jsx("div", { className: 'py-1', children: availableLanguages.map((language) => (_jsx(MenuItem, { children: _jsxs("button", { onClick: () => changeLanguage(language.code), className: 'data-[focus]:bg-glass-tinted text-foreground group flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors', children: [language.flag, _jsx("span", { children: language.name }), currentLocale === language.code && (_jsx("svg", { className: 'ml-auto h-4 w-4', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', children: _jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M5 13l4 4L19 7' }) }))] }) }, language.code))) }) }) })] }));
 }

package/dist/components/theme-switcher/index.js

@@ -15,6 +15,6 @@ const ThemeSwitcher = () => {
     if (!mounted) {
         return (_jsx("button", { className: 'border-input bg-card relative inline-flex h-9 w-9 items-center justify-center rounded-md border opacity-0', "aria-hidden": 'true', children: _jsx("div", { className: 'h-5 w-5' }) }));
     }
-    return (_jsxs("button", { onClick: toggleTheme, className: 'border-glass bg-glass hover:bg-glass-backdrop relative inline-flex h-9 w-9 items-center justify-center rounded-md border transition-colors', "aria-label": `Switch theme (current: ${theme})`, title: `Theme: ${theme === 'light' ? 'Light' : 'Dark'} (click to change)`, children: [_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: `absolute h-5 w-5 transition-all ${theme !== 'dark' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 rotate-90 opacity-0'}`, children: [_jsx("circle", { cx: '12', cy: '12', r: '5' }), _jsx("line", { x1: '12', y1: '1', x2: '12', y2: '3' }), _jsx("line", { x1: '12', y1: '21', x2: '12', y2: '23' }), _jsx("line", { x1: '4.22', y1: '4.22', x2: '5.64', y2: '5.64' }), _jsx("line", { x1: '18.36', y1: '18.36', x2: '19.78', y2: '19.78' }), _jsx("line", { x1: '1', y1: '12', x2: '3', y2: '12' }), _jsx("line", { x1: '21', y1: '12', x2: '23', y2: '12' }), _jsx("line", { x1: '4.22', y1: '19.78', x2: '5.64', y2: '18.36' }), _jsx("line", { x1: '18.36', y1: '5.64', x2: '19.78', y2: '4.22' })] }), _jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: `absolute h-5 w-5 transition-all ${theme === 'dark' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'}`, children: _jsx("path", { d: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' }) })] }));
+    return (_jsxs("button", { onClick: toggleTheme, className: 'border-glass bg-glass hover:bg-glass-tinted relative inline-flex h-9 w-9 items-center justify-center rounded-md border transition-colors', "aria-label": `Switch theme (current: ${theme})`, title: `Theme: ${theme === 'light' ? 'Light' : 'Dark'} (click to change)`, children: [_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: `absolute h-5 w-5 transition-all ${theme !== 'dark' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 rotate-90 opacity-0'}`, children: [_jsx("circle", { cx: '12', cy: '12', r: '5' }), _jsx("line", { x1: '12', y1: '1', x2: '12', y2: '3' }), _jsx("line", { x1: '12', y1: '21', x2: '12', y2: '23' }), _jsx("line", { x1: '4.22', y1: '4.22', x2: '5.64', y2: '5.64' }), _jsx("line", { x1: '18.36', y1: '18.36', x2: '19.78', y2: '19.78' }), _jsx("line", { x1: '1', y1: '12', x2: '3', y2: '12' }), _jsx("line", { x1: '21', y1: '12', x2: '23', y2: '12' }), _jsx("line", { x1: '4.22', y1: '19.78', x2: '5.64', y2: '18.36' }), _jsx("line", { x1: '18.36', y1: '5.64', x2: '19.78', y2: '4.22' })] }), _jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: `absolute h-5 w-5 transition-all ${theme === 'dark' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'}`, children: _jsx("path", { d: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' }) })] }));
 };
 export default ThemeSwitcher;

package/dist/components/tooltip/index.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 interface TooltipProps {
     children: ReactNode;
-    content: string;
+    content: ReactNode;
 }
 export default function Tooltip({ children, content }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAIpD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,YAAY,2CAyDlE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAcpD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,YAAY,2CA2DlE"}

package/dist/components/tooltip/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { arrow, autoUpdate, flip, offset, shift, useFloating, useHover, useInteractions } from '@floating-ui/react';
+import { FloatingPortal, arrow, autoUpdate, flip, offset, shift, useFloating, useHover, useInteractions, } from '@floating-ui/react';
 export default function Tooltip({ children, content }) {
     const [isOpen, setIsOpen] = useState(false);
     const arrowRef = useRef(null);
@@ -30,11 +30,11 @@ export default function Tooltip({ children, content }) {
         bottom: 'top',
         left: 'right',
     }[placement.split('-')[0]];
-    return (_jsxs("div", { ref: refs.setReference, ...getReferenceProps(), className: 'inline-block', children: [children, isOpen && (_jsxs("div", { ref: refs.setFloating, style: floatingStyles, className: 'z-50 rounded bg-black px-2 py-1 text-sm text-white shadow-md dark:bg-white dark:text-black', ...getFloatingProps(), children: [content, _jsx("div", { ref: arrowRef, className: 'absolute h-2 w-2 rotate-45 bg-black dark:bg-white', style: {
-                            left: middlewareData.arrow?.x != null ? `${middlewareData.arrow.x}px` : '',
-                            top: middlewareData.arrow?.y != null ? `${middlewareData.arrow.y}px` : '',
-                            right: '',
-                            bottom: '',
-                            [staticSide]: '-4px',
-                        } })] }))] }));
+    return (_jsxs("div", { ref: refs.setReference, ...getReferenceProps(), className: 'inline-block', children: [children, isOpen && (_jsx(FloatingPortal, { children: _jsxs("div", { ref: refs.setFloating, style: floatingStyles, className: 'z-100 rounded bg-black px-2 py-1 text-sm text-white shadow-md dark:bg-white dark:text-black', ...getFloatingProps(), children: [content, _jsx("div", { ref: arrowRef, className: 'absolute h-2 w-2 rotate-45 bg-black dark:bg-white', style: {
+                                left: middlewareData.arrow?.x != null ? `${middlewareData.arrow.x}px` : '',
+                                top: middlewareData.arrow?.y != null ? `${middlewareData.arrow.y}px` : '',
+                                right: '',
+                                bottom: '',
+                                [staticSide]: '-4px',
+                            } })] }) }))] }));
 }

package/dist/styles/globals.css

@@ -72,7 +72,8 @@
   --color-selection: var(--selection);
   --color-selection-foreground: var(--selection-foreground);
   --color-glass: var(--glass);
-  --color-glass-backdrop: var(--glass-backdrop);
+  --color-glass-tinted: var(--glass-tinted);
+  --color-glass-glow: var(--glass-glow);
 }
 
 :root {
@@ -121,18 +122,18 @@
   /* liquid glass (light) */
   /************************************************************/
   --glass: oklch(0.8985 0.0271 250 / 0.22);
-  --glass-backdrop: oklch(0.8764 0.0271 255 / 0.32);
+  --glass-tinted: oklch(0.8764 0.0271 255 / 0.32);
+  --glass-glow: oklch(0.65 0.18 250 / 0.32);
   --glass-surface: oklch(0.962 0.014 250 / 0.42);
-  --glass-surface-backdrop: oklch(0.975 0.018 255 / 0.52);
+  --glass-surface-tinted: oklch(0.975 0.018 255 / 0.52);
+  --glass-surface-glow: var(--glass-surface);
   --glass-border: oklch(0.92 0.02 250 / 0.78);
   --glass-border-subtle: oklch(0.88 0.015 250 / 0.5);
   --glass-shine: oklch(1 0 0 / 1);
   --glass-shine-subtle: oklch(1 0 0 / 0.88);
   --glass-shadow-color: oklch(0.25 0.02 250 / 0.08);
   --glass-shadow-ambient: oklch(0.35 0.015 250 / 0.055);
-  --glass-glow: oklch(0.65 0.18 250 / 0.32);
-  --glass-blur: 14px;
-  --glass-blur-backdrop: 8px;
+  --glass-blur: 8px;
 
   --mesh-1: oklch(0.6008 0.1493 249.6 / 0.251);
   --mesh-2: oklch(0.6498 0.1201 300.4 / 0.2);
@@ -191,18 +192,18 @@
   /* liquid glass (dark) */
   /************************************************************/
   --glass: oklch(0.32 0.0198 252.2 / 0.52);
-  --glass-backdrop: oklch(0.36 0.0206 254.9 / 0.62);
+  --glass-tinted: oklch(0.36 0.0206 254.9 / 0.62);
+  --glass-glow: oklch(0.6991 0.1648 249.1 / 0.302);
   --glass-surface: oklch(0.1792 0.0198 252.2 / 0.42);
-  --glass-surface-backdrop: oklch(0.2195 0.0206 254.9 / 0.52);
+  --glass-surface-tinted: oklch(0.2195 0.0206 254.9 / 0.52);
+  --glass-surface-glow: var(--glass-surface);
   --glass-border: oklch(1 0 0 / 0.122);
   --glass-border-subtle: oklch(1 0 0 / 0.078);
   --glass-shine: oklch(1 0 0 / 0.149);
   --glass-shine-subtle: oklch(1 0 0 / 0.078);
   --glass-shadow-color: oklch(0 0 0 / 0.21);
   --glass-shadow-ambient: oklch(0 0 0 / 0.11);
-  --glass-glow: oklch(0.6991 0.1648 249.1 / 0.302);
-  --glass-blur: 12px;
-  --glass-blur-backdrop: 8px;
+  --glass-blur: 8px;
 
   --mesh-1: oklch(0.4035 0.121 252.1 / 0.349);
   --mesh-2: oklch(0.4504 0.1802 299.9 / 0.302);
@@ -276,7 +277,10 @@
   @apply after:border-border relative after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten;
 }
 
-@utility glass {
+/************************************************************/
+/* liquid glass */
+/************************************************************/
+@utility glass-base {
   background:
     linear-gradient(
       135deg,
@@ -285,29 +289,30 @@
       color-mix(in oklab, var(--glass-shine) 4%, transparent) 70%,
       color-mix(in oklab, var(--glass-shine) 6%, transparent) 100%
     ),
-    var(--glass-surface);
-  /*backdrop-filter: blur(var(--glass-blur)) saturate(1.2);*/
+    var(--glass-surface-slot, var(--glass-surface));
   box-shadow:
     0 1px 2px var(--glass-shadow-ambient),
     0 5px 10px var(--glass-shadow-color),
     inset 0 1px 0 var(--glass-shine-subtle);
 }
 
+@utility glass {
+  --glass-surface-slot: var(--glass-surface);
+  @apply glass-base;
+}
+
+@utility glass-tinted {
+  --glass-surface-slot: var(--glass-surface-tinted);
+  @apply glass-base;
+}
+
+@utility glass-glow {
+  --glass-surface-slot: var(--glass-surface-glow);
+  @apply glass-base;
+}
+
 @utility glass-backdrop {
-  background:
-    linear-gradient(
-      135deg,
-      color-mix(in oklab, var(--glass-shine) 12%, transparent) 0%,
-      color-mix(in oklab, var(--glass-shine) 8%, transparent) 30%,
-      color-mix(in oklab, var(--glass-shine) 4%, transparent) 70%,
-      color-mix(in oklab, var(--glass-shine) 6%, transparent) 100%
-    ),
-    var(--glass-surface-backdrop);
-  backdrop-filter: blur(var(--glass-blur-backdrop)) saturate(1.2);
-  box-shadow:
-    0 1px 2px var(--glass-shadow-ambient),
-    0 5px 10px var(--glass-shadow-color),
-    inset 0 1px 0 var(--glass-shine-subtle);
+  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
 }
 
 @utility border-glass {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korioinc/next-core",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "type": "module",
   "exports": {
     "./ads": {
@@ -79,11 +79,11 @@
     "tsc-alias": "^1.8.16",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "@korioinc/next-configs": "2.0.6"
+    "@korioinc/next-configs": "2.0.8"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@formatjs/intl-localematcher": "^0.6.2",
+    "@formatjs/intl-localematcher": "^0.7.5",
     "clsx": "^2.1.1",
     "cookies-next": "^6.1.1",
     "cosmiconfig": "^9.0.0",
@@ -94,7 +94,7 @@
     "schema-dts": "^1.1.5",
     "tailwind-merge": "^3.4.0",
     "valtio": "^2.2.0",
-    "@korioinc/next-conf": "2.0.6"
+    "@korioinc/next-conf": "2.0.8"
   },
   "publishConfig": {
     "access": "public",