@korioinc/next-core 2.0.56 → 3.0.0

package/README.md

@@ -204,6 +204,32 @@ export default function Layout({ children }: { children: ReactNode }) {
 }
 ```
 
+The switchers keep theme state, system-theme resolution, locale cookies, and routing inside the kit. Consumer apps can supply catalog-owned labels through the component API. Omitting the props uses concise English defaults.
+
+```tsx
+'use client';
+
+import { LocaleSwitcher, ThemeSwitcher } from '@korioinc/next-core/components';
+import { useLingui } from '@lingui/react/macro';
+
+export function PreferenceControls() {
+  const { t } = useLingui();
+  const themeLabels = {
+    light: t`Light`,
+    dark: t`Dark`,
+    system: t`System`,
+    changeTheme: t`Change theme`,
+  };
+
+  return (
+    <>
+      <ThemeSwitcher labels={themeLabels} />
+      <LocaleSwitcher ariaLabel={t`Change language`} />
+    </>
+  );
+}
+```
+
 Import the shared styles from app CSS:
 
 ```css

package/dist/components/locale-switcher/index.d.ts

@@ -5,7 +5,9 @@ interface LocaleSwitcherProps {
      * If omitted, defaults to locales enabled in lingui.config.ts.
      */
     languages?: string[];
+    /** Accessible name for the language menu trigger. */
+    ariaLabel?: string;
 }
-export default function LocaleSwitcher({ languages }?: LocaleSwitcherProps): import("react").JSX.Element | null;
+export default function LocaleSwitcher({ languages, ariaLabel }?: LocaleSwitcherProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/locale-switcher/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/locale-switcher/index.tsx"],"names":[],"mappings":"AAeA,UAAU,mBAAmB;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,GAAE,mBAAwB,sCAiG7E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/locale-switcher/index.tsx"],"names":[],"mappings":"AAeA,UAAU,mBAAmB;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,SAA6B,EAAE,GAAE,mBAAwB,sCAmG5G"}

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

@@ -9,7 +9,7 @@ import { allLanguages } from './language-options';
 import { resolveVisibleLanguages } from './resolve-visible-languages';
 import { setCookie } from 'cookies-next/client';
 import linguiConfig from 'lingui.config';
-export default function LocaleSwitcher({ languages } = {}) {
+export default function LocaleSwitcher({ languages, ariaLabel = 'Change language' } = {}) {
     const router = useRouter();
     const pathname = usePathname();
     const { i18n } = useLingui();
@@ -53,5 +53,5 @@ export default function LocaleSwitcher({ languages } = {}) {
     if (!currentLanguage) {
         return null;
     }
-    return (_jsxs(Menu, { as: 'div', className: 'relative', children: [_jsx(MenuButton, { className: 'glass glass-border-subtle hover:bg-glass-interactive 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-surface glass-backdrop-md glass-shadow-sm glass-border-faint z-100 w-48 rounded-md border ring-1 ring-black/5 [--anchor-gap:8px] 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-interactive text-foreground group flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors', children: [language.flag, _jsx("span", { className: 'whitespace-nowrap', 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, { "aria-label": ariaLabel, className: 'glass glass-border-subtle hover:bg-glass-interactive 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-surface glass-backdrop-md glass-shadow-sm glass-border-faint z-100 w-48 rounded-md border ring-1 ring-black/5 [--anchor-gap:8px] 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-interactive text-foreground group flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors', children: [language.flag, _jsx("span", { className: 'whitespace-nowrap', 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.d.ts

@@ -1,4 +1,14 @@
 import * as React from 'react';
-declare const ThemeSwitcher: () => React.JSX.Element;
+interface ThemeSwitcherLabels {
+    light: string;
+    dark: string;
+    system: string;
+    changeTheme: string;
+}
+interface ThemeSwitcherProps {
+    /** Consumer-owned labels. Omit to use the English defaults. */
+    labels?: ThemeSwitcherLabels;
+}
+declare const ThemeSwitcher: ({ labels }?: ThemeSwitcherProps) => React.JSX.Element;
 export default ThemeSwitcher;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/theme-switcher/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme-switcher/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqC/B,QAAA,MAAM,aAAa,yBAsGlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme-switcher/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AAwCD,QAAA,MAAM,aAAa,GAAI,aAA4C,kBAAuB,sBAoGzF,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -2,6 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTheme } from '../../theme';
+const DEFAULT_THEME_SWITCHER_LABELS = {
+    light: 'Light',
+    dark: 'Dark',
+    system: 'System',
+    changeTheme: 'Change theme',
+};
 const FALLBACK_THEME_ORDER = ['light', 'dark'];
 const isThemeMode = (value) => value === 'light' || value === 'dark' || value === 'system';
 const getThemeOrder = (themes) => {
@@ -17,7 +23,7 @@ const normalizeTheme = ({ theme, resolvedTheme, themeOrder, }) => {
     }
     return themeOrder[0] ?? 'light';
 };
-const ThemeSwitcher = () => {
+const ThemeSwitcher = ({ labels = DEFAULT_THEME_SWITCHER_LABELS } = {}) => {
     const { theme, resolvedTheme, setTheme, themes } = useTheme();
     const [mounted, setMounted] = React.useState(false);
     const [canAnimateColors, setCanAnimateColors] = React.useState(false);
@@ -30,8 +36,7 @@ const ThemeSwitcher = () => {
     }, []);
     const themeOrder = getThemeOrder(themes);
     const currentTheme = normalizeTheme({ theme, resolvedTheme, themeOrder });
-    const resolvedThemeLabel = resolvedTheme === 'dark' ? 'Dark' : 'Light';
-    const currentThemeLabel = currentTheme === 'system' ? `System (${resolvedThemeLabel})` : currentTheme === 'dark' ? 'Dark' : 'Light';
+    const currentThemeLabel = currentTheme === 'system' ? labels.system : currentTheme === 'dark' ? labels.dark : labels.light;
     const toggleTheme = () => {
         const currentIndex = themeOrder.indexOf(currentTheme);
         const nextTheme = themeOrder[(currentIndex + 1) % themeOrder.length];
@@ -40,6 +45,6 @@ const ThemeSwitcher = () => {
     if (!mounted) {
         return (_jsx("button", { className: 'glass glass-border-subtle 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: `glass glass-border-subtle hover:bg-glass-interactive relative inline-flex h-9 w-9 items-center justify-center rounded-md border ${canAnimateColors ? 'transition-colors' : ''}`, "aria-label": `Switch theme (current: ${currentThemeLabel})`, title: `Theme: ${currentThemeLabel} (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 ${currentTheme === 'light' ? '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 ${currentTheme === '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' }) }), _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 ${currentTheme === 'system' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 rotate-90 opacity-0'}`, children: [_jsx("rect", { x: '3', y: '4', width: '18', height: '12', rx: '2' }), _jsx("line", { x1: '8', y1: '20', x2: '16', y2: '20' }), _jsx("line", { x1: '12', y1: '16', x2: '12', y2: '20' })] })] }));
+    return (_jsxs("button", { onClick: toggleTheme, className: `glass glass-border-subtle hover:bg-glass-interactive relative inline-flex h-9 w-9 items-center justify-center rounded-md border ${canAnimateColors ? 'transition-colors' : ''}`, "aria-label": `${labels.changeTheme}: ${currentThemeLabel}`, 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 ${currentTheme === 'light' ? '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 ${currentTheme === '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' }) }), _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 ${currentTheme === 'system' ? 'scale-100 rotate-0 opacity-100' : 'scale-0 rotate-90 opacity-0'}`, children: [_jsx("rect", { x: '3', y: '4', width: '18', height: '12', rx: '2' }), _jsx("line", { x1: '8', y1: '20', x2: '16', y2: '20' }), _jsx("line", { x1: '12', y1: '16', x2: '12', y2: '20' })] })] }));
 };
 export default ThemeSwitcher;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korioinc/next-core",
-  "version": "2.0.56",
+  "version": "3.0.0",
   "type": "module",
   "exports": {
     "./ads": {
@@ -90,7 +90,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10",
-    "@korioinc/next-configs": "2.0.56"
+    "@korioinc/next-configs": "3.0.0"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
@@ -105,7 +105,7 @@
     "schema-dts": "^2.0.0",
     "tailwind-merge": "^3.6.0",
     "valtio": "^2.3.2",
-    "@korioinc/next-conf": "2.0.56"
+    "@korioinc/next-conf": "3.0.0"
   },
   "publishConfig": {
     "access": "public",