@mesob/ui 0.1.0 → 0.2.0

package/dist/hooks/use-router.d.ts

@@ -0,0 +1,7 @@
+import { Router } from '../components/mesob-context.js';
+import 'react/jsx-runtime';
+import 'react';
+
+declare function useRouter(): Router;
+
+export { useRouter };

package/dist/hooks/use-router.js

@@ -0,0 +1,36 @@
+"use client";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/mesob-context.tsx
+import {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MesobContext = createContext(null);
+function useMesob() {
+  return useContext(MesobContext);
+}
+
+// src/hooks/use-router.ts
+function useRouter() {
+  const mesob = useMesob();
+  if (!mesob?.router) {
+    throw new Error(
+      "useRouter must be used within MesobProvider with useRouter prop provided"
+    );
+  }
+  return mesob.router;
+}
+export {
+  useRouter
+};
+//# sourceMappingURL=use-router.js.map

package/dist/hooks/use-router.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/tooltip.tsx","../../src/components/mesob-context.tsx","../../src/hooks/use-router.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport type * as React from 'react';\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipPrimitive.Root data-slot=\"tooltip\" {...props}>\n      {children}\n    </TooltipPrimitive.Root>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","'use client';\n\nimport { TooltipProvider } from '@mesob/ui/components/tooltip';\nimport {\n  type ComponentType,\n  createContext,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from 'react';\n\nexport type MesobLinkProps = {\n  href: string;\n  children: ReactNode;\n  className?: string;\n  onClick?: () => void;\n};\n\nexport type Router = {\n  push: (href: string) => void;\n  replace: (href: string) => void;\n  back: () => void;\n  forward: () => void;\n  refresh: () => void;\n  prefetch: (href: string) => void;\n};\n\nexport type MesobContextValue = {\n  linkComponent?: ComponentType<MesobLinkProps>;\n  t?: (key: string, params?: Record<string, string | number>) => string;\n  router?: Router;\n};\n\nconst MesobContext = createContext<MesobContextValue | null>(null);\n\nexport type MesobProviderProps = {\n  children: ReactNode;\n  linkComponent?: ComponentType<MesobLinkProps>;\n  /** Hook that returns the app's t function (e.g. from next-intl useTranslations()). */\n  useTranslation?: () => (\n    key: string,\n    params?: Record<string, string | number>,\n  ) => string;\n  /** Hook that returns the app's router (e.g. from next-intl useRouter()). */\n  useRouter?: () => Router;\n};\n\nexport function MesobProvider({\n  children,\n  linkComponent,\n  useTranslation,\n  useRouter,\n}: MesobProviderProps) {\n  const t = useTranslation?.();\n  const router = useRouter?.();\n  const value = useMemo<MesobContextValue>(\n    () => ({ linkComponent, t: t ?? undefined, router: router ?? undefined }),\n    [linkComponent, t, router],\n  );\n  return (\n    <MesobContext.Provider value={value}>\n      <TooltipProvider delayDuration={0}>{children}</TooltipProvider>\n    </MesobContext.Provider>\n  );\n}\n\nexport function useMesob(): MesobContextValue | null {\n  return useContext(MesobContext);\n}\n","'use client';\n\nimport { useMesob } from '../components/mesob-context';\n\nexport function useRouter() {\n  const mesob = useMesob();\n\n  if (!mesob?.router) {\n    throw new Error(\n      'useRouter must be used within MesobProvider with useRouter prop provided',\n    );\n  }\n\n  return mesob.router;\n}\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;;;ACExB,YAAY,sBAAsB;AAQ9B,cAiCE,YAjCF;;;ACRJ;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAoDD,gBAAAA,YAAA;AA5BN,IAAM,eAAe,cAAwC,IAAI;AAiC1D,SAAS,WAAqC;AACnD,SAAO,WAAW,YAAY;AAChC;;;AChEO,SAAS,YAAY;AAC1B,QAAM,QAAQ,SAAS;AAEvB,MAAI,CAAC,OAAO,QAAQ;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,SAAO,MAAM;AACf;","names":["jsx"]}

package/dist/hooks/use-translation.d.ts

@@ -0,0 +1,5 @@
+import * as next_intl from 'next-intl';
+
+declare function useTranslation(namespace?: string): next_intl._Translator<Record<string, any>, string> | ((key: string, params?: Record<string, string | number>) => string);
+
+export { useTranslation };

package/dist/hooks/use-translation.js

@@ -0,0 +1,41 @@
+"use client";
+
+// src/hooks/use-translation.ts
+import { useTranslations } from "next-intl";
+import { useMemo as useMemo2 } from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/mesob-context.tsx
+import {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MesobContext = createContext(null);
+function useMesob() {
+  return useContext(MesobContext);
+}
+
+// src/hooks/use-translation.ts
+function useTranslation(namespace) {
+  const mesob = useMesob();
+  const nextIntlT = useTranslations(namespace);
+  return useMemo2(() => {
+    if (mesob?.t) {
+      return (key, params) => mesob.t(namespace ? `${namespace}.${key}` : key, params);
+    }
+    return nextIntlT;
+  }, [mesob?.t, namespace, nextIntlT]);
+}
+export {
+  useTranslation
+};
+//# sourceMappingURL=use-translation.js.map

package/dist/hooks/use-translation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-translation.ts","../../src/lib/utils.ts","../../src/components/tooltip.tsx","../../src/components/mesob-context.tsx"],"sourcesContent":["'use client';\n\nimport { useTranslations } from 'next-intl';\nimport { useMemo } from 'react';\nimport { useMesob } from '../components/mesob-context';\n\nexport function useTranslation(namespace?: string) {\n  const mesob = useMesob();\n  const nextIntlT = useTranslations(namespace);\n\n  return useMemo(() => {\n    if (mesob?.t) {\n      return (key: string, params?: Record<string, string | number>) =>\n        mesob.t!(namespace ? `${namespace}.${key}` : key, params);\n    }\n    return nextIntlT;\n  }, [mesob?.t, namespace, nextIntlT]);\n}\n","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport type * as React from 'react';\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipPrimitive.Root data-slot=\"tooltip\" {...props}>\n      {children}\n    </TooltipPrimitive.Root>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","'use client';\n\nimport { TooltipProvider } from '@mesob/ui/components/tooltip';\nimport {\n  type ComponentType,\n  createContext,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from 'react';\n\nexport type MesobLinkProps = {\n  href: string;\n  children: ReactNode;\n  className?: string;\n  onClick?: () => void;\n};\n\nexport type Router = {\n  push: (href: string) => void;\n  replace: (href: string) => void;\n  back: () => void;\n  forward: () => void;\n  refresh: () => void;\n  prefetch: (href: string) => void;\n};\n\nexport type MesobContextValue = {\n  linkComponent?: ComponentType<MesobLinkProps>;\n  t?: (key: string, params?: Record<string, string | number>) => string;\n  router?: Router;\n};\n\nconst MesobContext = createContext<MesobContextValue | null>(null);\n\nexport type MesobProviderProps = {\n  children: ReactNode;\n  linkComponent?: ComponentType<MesobLinkProps>;\n  /** Hook that returns the app's t function (e.g. from next-intl useTranslations()). */\n  useTranslation?: () => (\n    key: string,\n    params?: Record<string, string | number>,\n  ) => string;\n  /** Hook that returns the app's router (e.g. from next-intl useRouter()). */\n  useRouter?: () => Router;\n};\n\nexport function MesobProvider({\n  children,\n  linkComponent,\n  useTranslation,\n  useRouter,\n}: MesobProviderProps) {\n  const t = useTranslation?.();\n  const router = useRouter?.();\n  const value = useMemo<MesobContextValue>(\n    () => ({ linkComponent, t: t ?? undefined, router: router ?? undefined }),\n    [linkComponent, t, router],\n  );\n  return (\n    <MesobContext.Provider value={value}>\n      <TooltipProvider delayDuration={0}>{children}</TooltipProvider>\n    </MesobContext.Provider>\n  );\n}\n\nexport function useMesob(): MesobContextValue | null {\n  return useContext(MesobContext);\n}\n"],"mappings":";;;AAEA,SAAS,uBAAuB;AAChC,SAAS,WAAAA,gBAAe;;;ACHxB,SAA0B,YAAY;AACtC,SAAS,eAAe;;;ACExB,YAAY,sBAAsB;AAQ9B,cAiCE,YAjCF;;;ACRJ;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAoDD,gBAAAC,YAAA;AA5BN,IAAM,eAAe,cAAwC,IAAI;AAiC1D,SAAS,WAAqC;AACnD,SAAO,WAAW,YAAY;AAChC;;;AH9DO,SAAS,eAAe,WAAoB;AACjD,QAAM,QAAQ,SAAS;AACvB,QAAM,YAAY,gBAAgB,SAAS;AAE3C,SAAOC,SAAQ,MAAM;AACnB,QAAI,OAAO,GAAG;AACZ,aAAO,CAAC,KAAa,WACnB,MAAM,EAAG,YAAY,GAAG,SAAS,IAAI,GAAG,KAAK,KAAK,MAAM;AAAA,IAC5D;AACA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,GAAG,WAAW,SAAS,CAAC;AACrC;","names":["useMemo","jsx","useMemo"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mesob/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -33,6 +33,10 @@
       "types": "./dist/components/entity/index.d.ts",
       "default": "./dist/components/entity/index.js"
     },
+    "./components/page": {
+      "types": "./dist/components/page/index.d.ts",
+      "default": "./dist/components/page/index.js"
+    },
     "./components/section": {
       "types": "./dist/components/section/index.d.ts",
       "default": "./dist/components/section/index.js"
@@ -95,12 +99,14 @@
     "@tailwindcss/postcss": "^4.1.11",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "next-intl": "^4.5.6",
     "tailwindcss": "^4.1.11",
     "tsup": "^8.5.0",
     "tsx": "^4.20.3",
     "typescript": "^5.7.2"
   },
   "peerDependencies": {
+    "next-intl": "^4.5.6",
     "nuqs": "^2.8.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

package/src/styles/globals.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @source "../../../../apps/**/*.{ts,tsx}";
+@source "../../../../demos/**/*.{ts,tsx}";
 @source "../**/*.{ts,tsx}";
 @source "../../../auth-react/src/**/*.{ts,tsx}";
 
@@ -38,6 +39,7 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-active: oklch(0.94 0.04 250);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
 }
@@ -73,6 +75,7 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-active: oklch(0.28 0.06 264);
   --sidebar-border: oklch(0.269 0 0);
   --sidebar-ring: oklch(0.439 0 0);
 }
@@ -112,6 +115,7 @@
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-active: var(--sidebar-active);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 }