@mesob/ui 0.2.0 → 0.2.2

package/dist/components/theme-toggle.js

@@ -10,18 +10,18 @@ function cn(...inputs) {
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -43,6 +43,9 @@ function Button({
   variant,
   size,
   asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
@@ -51,7 +54,12 @@ function Button({
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        leftIcon,
+        children,
+        rightIcon
+      ] })
     }
   );
 }
@@ -59,11 +67,11 @@ function Button({
 // src/components/theme-toggle.tsx
 import { IconMoon, IconSun } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ThemeToggle({ className }) {
   const { resolvedTheme, setTheme, theme } = useTheme();
   const isDark = (theme ?? resolvedTheme) === "dark";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     Button,
     {
       type: "button",

package/dist/components/theme-toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/button.tsx","../../src/components/theme-toggle.tsx"],"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","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { IconMoon, IconSun } from '@tabler/icons-react';\nimport { useTheme } from 'next-themes';\n\ntype ThemeToggleProps = {\n  className?: string;\n};\n\nexport function ThemeToggle({ className }: ThemeToggleProps) {\n  const { resolvedTheme, setTheme, theme } = useTheme();\n  const isDark = (theme ?? resolvedTheme) === 'dark';\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon\"\n      aria-label=\"Toggle theme\"\n      className={cn('relative', className)}\n      onClick={() => setTheme(isDark ? 'light' : 'dark')}\n    >\n      <IconSun className=\"h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n      <IconMoon className=\"absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  );\n}\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACJA,SAAS,YAAY;AACrB,SAAS,WAA8B;AAgDnC;AA7CJ,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;;;ACpDA,SAAS,UAAU,eAAe;AAClC,SAAS,gBAAgB;AAWrB,SAQE,OAAAA,MARF;AALG,SAAS,YAAY,EAAE,UAAU,GAAqB;AAC3D,QAAM,EAAE,eAAe,UAAU,MAAM,IAAI,SAAS;AACpD,QAAM,UAAU,SAAS,mBAAmB;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC,SAAS,MAAM,SAAS,SAAS,UAAU,MAAM;AAAA,MAEjD;AAAA,wBAAAA,KAAC,WAAQ,WAAU,0EAAyE;AAAA,QAC5F,gBAAAA,KAAC,YAAS,WAAU,kFAAiF;AAAA,QACrG,gBAAAA,KAAC,UAAK,WAAU,WAAU,0BAAY;AAAA;AAAA;AAAA,EACxC;AAEJ;","names":["jsx"]}
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/button.tsx","../../src/components/theme-toggle.tsx"],"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","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',\n        outline:\n          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\ntype ButtonProps = React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    leftIcon?: React.ReactNode;\n    rightIcon?: React.ReactNode;\n  };\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  leftIcon,\n  rightIcon,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {leftIcon}\n          {children}\n          {rightIcon}\n        </>\n      )}\n    </Comp>\n  );\n}\n\nexport { Button, buttonVariants };\n","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { IconMoon, IconSun } from '@tabler/icons-react';\nimport { useTheme } from 'next-themes';\n\ntype ThemeToggleProps = {\n  className?: string;\n};\n\nexport function ThemeToggle({ className }: ThemeToggleProps) {\n  const { resolvedTheme, setTheme, theme } = useTheme();\n  const isDark = (theme ?? resolvedTheme) === 'dark';\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon\"\n      aria-label=\"Toggle theme\"\n      className={cn('relative', className)}\n      onClick={() => setTheme(isDark ? 'light' : 'dark')}\n    >\n      <IconSun className=\"h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n      <IconMoon className=\"absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  );\n}\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACJA,SAAS,YAAY;AACrB,SAAS,WAA8B;AAwDnC,SAQI,UARJ,KAQI,YARJ;AArDJ,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AASA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA,MAEH,oBACC,WAEA,iCACG;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;;;ACtEA,SAAS,UAAU,eAAe;AAClC,SAAS,gBAAgB;AAWrB,SAQE,OAAAA,MARF,QAAAC,aAAA;AALG,SAAS,YAAY,EAAE,UAAU,GAAqB;AAC3D,QAAM,EAAE,eAAe,UAAU,MAAM,IAAI,SAAS;AACpD,QAAM,UAAU,SAAS,mBAAmB;AAE5C,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC,SAAS,MAAM,SAAS,SAAS,UAAU,MAAM;AAAA,MAEjD;AAAA,wBAAAD,KAAC,WAAQ,WAAU,0EAAyE;AAAA,QAC5F,gBAAAA,KAAC,YAAS,WAAU,kFAAiF;AAAA,QACrG,gBAAAA,KAAC,UAAK,WAAU,WAAU,0BAAY;AAAA;AAAA;AAAA,EACxC;AAEJ;","names":["jsx","jsxs"]}

package/dist/hooks/use-translation.js

@@ -29,8 +29,9 @@ 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);
+    const t = mesob?.t;
+    if (t) {
+      return (key, params) => t(namespace ? `${namespace}.${key}` : key, params);
     }
     return nextIntlT;
   }, [mesob?.t, namespace, nextIntlT]);

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

@@ -1 +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"]}
+{"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    const t = mesob?.t;\n    if (t) {\n      return (key: string, params?: Record<string, string | number>) =>\n        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,UAAM,IAAI,OAAO;AACjB,QAAI,GAAG;AACL,aAAO,CAAC,KAAa,WACnB,EAAE,YAAY,GAAG,SAAS,IAAI,GAAG,KAAK,KAAK,MAAM;AAAA,IACrD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,GAAG,WAAW,SAAS,CAAC;AACrC;","names":["useMemo","jsx","useMemo"]}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
+export { REQUIRED_THEME_VARS, THEME_VAR_NAMES, ThemeValidation, ThemeVarName, validateTheme } from './lib/theme-schema.js';
 export { cn } from './lib/utils.js';
 import 'clsx';

package/dist/index.js

@@ -1,3 +1,93 @@
+// src/lib/theme-schema.ts
+var SHADE_KEYS = [
+  50,
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900,
+  950
+];
+var THEME_VAR_NAMES = [
+  "--background",
+  "--foreground",
+  "--card",
+  "--card-foreground",
+  "--popover",
+  "--popover-foreground",
+  "--primary",
+  "--primary-foreground",
+  ...SHADE_KEYS.map((s) => `--primary-${s}`),
+  "--secondary",
+  "--secondary-foreground",
+  ...SHADE_KEYS.map((s) => `--secondary-${s}`),
+  "--accent",
+  "--accent-foreground",
+  ...SHADE_KEYS.map((s) => `--accent-${s}`),
+  "--muted",
+  "--muted-foreground",
+  "--destructive",
+  "--destructive-foreground",
+  "--border",
+  "--input",
+  "--ring",
+  "--chart-1",
+  "--chart-2",
+  "--chart-3",
+  "--chart-4",
+  "--chart-5",
+  "--radius",
+  "--spacing",
+  "--sidebar",
+  "--sidebar-foreground",
+  "--sidebar-primary",
+  "--sidebar-primary-foreground",
+  "--sidebar-accent",
+  "--sidebar-accent-foreground",
+  "--sidebar-active",
+  "--sidebar-border",
+  "--sidebar-ring",
+  "--overlay"
+];
+var THEME_VAR_SET = new Set(THEME_VAR_NAMES);
+var REQUIRED_THEME_VARS = [
+  "--primary",
+  "--primary-foreground",
+  ...SHADE_KEYS.map((s) => `--primary-${s}`),
+  "--secondary",
+  "--secondary-foreground",
+  ...SHADE_KEYS.map((s) => `--secondary-${s}`),
+  "--accent",
+  "--accent-foreground",
+  ...SHADE_KEYS.map((s) => `--accent-${s}`),
+  "--radius",
+  "--spacing"
+];
+function validateTheme(theme) {
+  const keys = new Set(Object.keys(theme));
+  const unknown = [];
+  const missing = [];
+  for (const key of keys) {
+    if (!THEME_VAR_SET.has(key)) {
+      unknown.push(key);
+    }
+  }
+  for (const key of REQUIRED_THEME_VARS) {
+    if (!keys.has(key)) {
+      missing.push(key);
+    }
+  }
+  return {
+    valid: unknown.length === 0 && missing.length === 0,
+    unknown,
+    missing
+  };
+}
+
 // src/lib/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -5,6 +95,9 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 export {
-  cn
+  REQUIRED_THEME_VARS,
+  THEME_VAR_NAMES,
+  cn,
+  validateTheme
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.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"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}
+{"version":3,"sources":["../src/lib/theme-schema.ts","../src/lib/utils.ts"],"sourcesContent":["/**\n * Canonical theme variable names for consumer theme (theme.css or generateTheme).\n * UI components depend on these CSS vars; consumer defines them.\n */\n\nconst SHADE_KEYS = [\n  50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950,\n] as const;\n\nexport const THEME_VAR_NAMES = [\n  '--background',\n  '--foreground',\n  '--card',\n  '--card-foreground',\n  '--popover',\n  '--popover-foreground',\n  '--primary',\n  '--primary-foreground',\n  ...SHADE_KEYS.map((s) => `--primary-${s}`),\n  '--secondary',\n  '--secondary-foreground',\n  ...SHADE_KEYS.map((s) => `--secondary-${s}`),\n  '--accent',\n  '--accent-foreground',\n  ...SHADE_KEYS.map((s) => `--accent-${s}`),\n  '--muted',\n  '--muted-foreground',\n  '--destructive',\n  '--destructive-foreground',\n  '--border',\n  '--input',\n  '--ring',\n  '--chart-1',\n  '--chart-2',\n  '--chart-3',\n  '--chart-4',\n  '--chart-5',\n  '--radius',\n  '--spacing',\n  '--sidebar',\n  '--sidebar-foreground',\n  '--sidebar-primary',\n  '--sidebar-primary-foreground',\n  '--sidebar-accent',\n  '--sidebar-accent-foreground',\n  '--sidebar-active',\n  '--sidebar-border',\n  '--sidebar-ring',\n  '--overlay',\n] as const;\n\nexport type ThemeVarName = (typeof THEME_VAR_NAMES)[number];\n\nconst THEME_VAR_SET = new Set<string>(THEME_VAR_NAMES);\n\n/** Vars that a minimal theme (e.g. generateTheme) should provide for primary/secondary/accent. */\nexport const REQUIRED_THEME_VARS: readonly string[] = [\n  '--primary',\n  '--primary-foreground',\n  ...SHADE_KEYS.map((s) => `--primary-${s}`),\n  '--secondary',\n  '--secondary-foreground',\n  ...SHADE_KEYS.map((s) => `--secondary-${s}`),\n  '--accent',\n  '--accent-foreground',\n  ...SHADE_KEYS.map((s) => `--accent-${s}`),\n  '--radius',\n  '--spacing',\n];\n\nexport type ThemeValidation = {\n  valid: boolean;\n  unknown: string[];\n  missing: string[];\n};\n\n/**\n * Validates a theme object against the consumer theme contract.\n * - unknown: keys not in THEME_VAR_NAMES (typos / unsupported).\n * - missing: required vars absent (for full theme override).\n */\nexport function validateTheme(theme: Record<string, string>): ThemeValidation {\n  const keys = new Set(Object.keys(theme));\n  const unknown: string[] = [];\n  const missing: string[] = [];\n\n  for (const key of keys) {\n    if (!THEME_VAR_SET.has(key)) {\n      unknown.push(key);\n    }\n  }\n  for (const key of REQUIRED_THEME_VARS) {\n    if (!keys.has(key)) {\n      missing.push(key);\n    }\n  }\n\n  return {\n    valid: unknown.length === 0 && missing.length === 0,\n    unknown,\n    missing,\n  };\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"],"mappings":";AAKA,IAAM,aAAa;AAAA,EACjB;AAAA,EAAI;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AACnD;AAEO,IAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,aAAa,CAAC,EAAE;AAAA,EACzC;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,eAAe,CAAC,EAAE;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,YAAY,CAAC,EAAE;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIA,IAAM,gBAAgB,IAAI,IAAY,eAAe;AAG9C,IAAM,sBAAyC;AAAA,EACpD;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,aAAa,CAAC,EAAE;AAAA,EACzC;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,eAAe,CAAC,EAAE;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,YAAY,CAAC,EAAE;AAAA,EACxC;AAAA,EACA;AACF;AAaO,SAAS,cAAc,OAAgD;AAC5E,QAAM,OAAO,IAAI,IAAI,OAAO,KAAK,KAAK,CAAC;AACvC,QAAM,UAAoB,CAAC;AAC3B,QAAM,UAAoB,CAAC;AAE3B,aAAW,OAAO,MAAM;AACtB,QAAI,CAAC,cAAc,IAAI,GAAG,GAAG;AAC3B,cAAQ,KAAK,GAAG;AAAA,IAClB;AAAA,EACF;AACA,aAAW,OAAO,qBAAqB;AACrC,QAAI,CAAC,KAAK,IAAI,GAAG,GAAG;AAClB,cAAQ,KAAK,GAAG;AAAA,IAClB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO,QAAQ,WAAW,KAAK,QAAQ,WAAW;AAAA,IAClD;AAAA,IACA;AAAA,EACF;AACF;;;ACtGA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}

package/dist/lib/theme-schema.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Canonical theme variable names for consumer theme (theme.css or generateTheme).
+ * UI components depend on these CSS vars; consumer defines them.
+ */
+declare const THEME_VAR_NAMES: readonly ["--background", "--foreground", "--card", "--card-foreground", "--popover", "--popover-foreground", "--primary", "--primary-foreground", ...string[], "--muted", "--muted-foreground", "--destructive", "--destructive-foreground", "--border", "--input", "--ring", "--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5", "--radius", "--spacing", "--sidebar", "--sidebar-foreground", "--sidebar-primary", "--sidebar-primary-foreground", "--sidebar-accent", "--sidebar-accent-foreground", "--sidebar-active", "--sidebar-border", "--sidebar-ring", "--overlay"];
+type ThemeVarName = (typeof THEME_VAR_NAMES)[number];
+/** Vars that a minimal theme (e.g. generateTheme) should provide for primary/secondary/accent. */
+declare const REQUIRED_THEME_VARS: readonly string[];
+type ThemeValidation = {
+    valid: boolean;
+    unknown: string[];
+    missing: string[];
+};
+/**
+ * Validates a theme object against the consumer theme contract.
+ * - unknown: keys not in THEME_VAR_NAMES (typos / unsupported).
+ * - missing: required vars absent (for full theme override).
+ */
+declare function validateTheme(theme: Record<string, string>): ThemeValidation;
+
+export { REQUIRED_THEME_VARS, THEME_VAR_NAMES, type ThemeValidation, type ThemeVarName, validateTheme };

package/dist/lib/theme-schema.js

@@ -0,0 +1,95 @@
+// src/lib/theme-schema.ts
+var SHADE_KEYS = [
+  50,
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900,
+  950
+];
+var THEME_VAR_NAMES = [
+  "--background",
+  "--foreground",
+  "--card",
+  "--card-foreground",
+  "--popover",
+  "--popover-foreground",
+  "--primary",
+  "--primary-foreground",
+  ...SHADE_KEYS.map((s) => `--primary-${s}`),
+  "--secondary",
+  "--secondary-foreground",
+  ...SHADE_KEYS.map((s) => `--secondary-${s}`),
+  "--accent",
+  "--accent-foreground",
+  ...SHADE_KEYS.map((s) => `--accent-${s}`),
+  "--muted",
+  "--muted-foreground",
+  "--destructive",
+  "--destructive-foreground",
+  "--border",
+  "--input",
+  "--ring",
+  "--chart-1",
+  "--chart-2",
+  "--chart-3",
+  "--chart-4",
+  "--chart-5",
+  "--radius",
+  "--spacing",
+  "--sidebar",
+  "--sidebar-foreground",
+  "--sidebar-primary",
+  "--sidebar-primary-foreground",
+  "--sidebar-accent",
+  "--sidebar-accent-foreground",
+  "--sidebar-active",
+  "--sidebar-border",
+  "--sidebar-ring",
+  "--overlay"
+];
+var THEME_VAR_SET = new Set(THEME_VAR_NAMES);
+var REQUIRED_THEME_VARS = [
+  "--primary",
+  "--primary-foreground",
+  ...SHADE_KEYS.map((s) => `--primary-${s}`),
+  "--secondary",
+  "--secondary-foreground",
+  ...SHADE_KEYS.map((s) => `--secondary-${s}`),
+  "--accent",
+  "--accent-foreground",
+  ...SHADE_KEYS.map((s) => `--accent-${s}`),
+  "--radius",
+  "--spacing"
+];
+function validateTheme(theme) {
+  const keys = new Set(Object.keys(theme));
+  const unknown = [];
+  const missing = [];
+  for (const key of keys) {
+    if (!THEME_VAR_SET.has(key)) {
+      unknown.push(key);
+    }
+  }
+  for (const key of REQUIRED_THEME_VARS) {
+    if (!keys.has(key)) {
+      missing.push(key);
+    }
+  }
+  return {
+    valid: unknown.length === 0 && missing.length === 0,
+    unknown,
+    missing
+  };
+}
+export {
+  REQUIRED_THEME_VARS,
+  THEME_VAR_NAMES,
+  validateTheme
+};
+//# sourceMappingURL=theme-schema.js.map

package/dist/lib/theme-schema.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/theme-schema.ts"],"sourcesContent":["/**\n * Canonical theme variable names for consumer theme (theme.css or generateTheme).\n * UI components depend on these CSS vars; consumer defines them.\n */\n\nconst SHADE_KEYS = [\n  50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950,\n] as const;\n\nexport const THEME_VAR_NAMES = [\n  '--background',\n  '--foreground',\n  '--card',\n  '--card-foreground',\n  '--popover',\n  '--popover-foreground',\n  '--primary',\n  '--primary-foreground',\n  ...SHADE_KEYS.map((s) => `--primary-${s}`),\n  '--secondary',\n  '--secondary-foreground',\n  ...SHADE_KEYS.map((s) => `--secondary-${s}`),\n  '--accent',\n  '--accent-foreground',\n  ...SHADE_KEYS.map((s) => `--accent-${s}`),\n  '--muted',\n  '--muted-foreground',\n  '--destructive',\n  '--destructive-foreground',\n  '--border',\n  '--input',\n  '--ring',\n  '--chart-1',\n  '--chart-2',\n  '--chart-3',\n  '--chart-4',\n  '--chart-5',\n  '--radius',\n  '--spacing',\n  '--sidebar',\n  '--sidebar-foreground',\n  '--sidebar-primary',\n  '--sidebar-primary-foreground',\n  '--sidebar-accent',\n  '--sidebar-accent-foreground',\n  '--sidebar-active',\n  '--sidebar-border',\n  '--sidebar-ring',\n  '--overlay',\n] as const;\n\nexport type ThemeVarName = (typeof THEME_VAR_NAMES)[number];\n\nconst THEME_VAR_SET = new Set<string>(THEME_VAR_NAMES);\n\n/** Vars that a minimal theme (e.g. generateTheme) should provide for primary/secondary/accent. */\nexport const REQUIRED_THEME_VARS: readonly string[] = [\n  '--primary',\n  '--primary-foreground',\n  ...SHADE_KEYS.map((s) => `--primary-${s}`),\n  '--secondary',\n  '--secondary-foreground',\n  ...SHADE_KEYS.map((s) => `--secondary-${s}`),\n  '--accent',\n  '--accent-foreground',\n  ...SHADE_KEYS.map((s) => `--accent-${s}`),\n  '--radius',\n  '--spacing',\n];\n\nexport type ThemeValidation = {\n  valid: boolean;\n  unknown: string[];\n  missing: string[];\n};\n\n/**\n * Validates a theme object against the consumer theme contract.\n * - unknown: keys not in THEME_VAR_NAMES (typos / unsupported).\n * - missing: required vars absent (for full theme override).\n */\nexport function validateTheme(theme: Record<string, string>): ThemeValidation {\n  const keys = new Set(Object.keys(theme));\n  const unknown: string[] = [];\n  const missing: string[] = [];\n\n  for (const key of keys) {\n    if (!THEME_VAR_SET.has(key)) {\n      unknown.push(key);\n    }\n  }\n  for (const key of REQUIRED_THEME_VARS) {\n    if (!keys.has(key)) {\n      missing.push(key);\n    }\n  }\n\n  return {\n    valid: unknown.length === 0 && missing.length === 0,\n    unknown,\n    missing,\n  };\n}\n"],"mappings":";AAKA,IAAM,aAAa;AAAA,EACjB;AAAA,EAAI;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AACnD;AAEO,IAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,aAAa,CAAC,EAAE;AAAA,EACzC;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,eAAe,CAAC,EAAE;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,YAAY,CAAC,EAAE;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIA,IAAM,gBAAgB,IAAI,IAAY,eAAe;AAG9C,IAAM,sBAAyC;AAAA,EACpD;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,aAAa,CAAC,EAAE;AAAA,EACzC;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,eAAe,CAAC,EAAE;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,GAAG,WAAW,IAAI,CAAC,MAAM,YAAY,CAAC,EAAE;AAAA,EACxC;AAAA,EACA;AACF;AAaO,SAAS,cAAc,OAAgD;AAC5E,QAAM,OAAO,IAAI,IAAI,OAAO,KAAK,KAAK,CAAC;AACvC,QAAM,UAAoB,CAAC;AAC3B,QAAM,UAAoB,CAAC;AAE3B,aAAW,OAAO,MAAM;AACtB,QAAI,CAAC,cAAc,IAAI,GAAG,GAAG;AAC3B,cAAQ,KAAK,GAAG;AAAA,IAClB;AAAA,EACF;AACA,aAAW,OAAO,qBAAqB;AACrC,QAAI,CAAC,KAAK,IAAI,GAAG,GAAG;AAClB,cAAQ,KAAK,GAAG;AAAA,IAClB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO,QAAQ,WAAW,KAAK,QAAQ,WAAW;AAAA,IAClD;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mesob/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,8 +10,6 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./globals.css": "./src/styles/globals.css",
-    "./styles/globals.css": "./src/styles/globals.css",
     "./postcss.config": "./postcss.config.mjs",
     "./lib/*": {
       "types": "./dist/lib/*.d.ts",
@@ -43,8 +41,7 @@
     }
   },
   "files": [
-    "dist",
-    "src/styles"
+    "dist"
   ],
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",

package/src/styles/globals.css

@@ -1,130 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@source "../../../../apps/**/*.{ts,tsx}";
-@source "../../../../demos/**/*.{ts,tsx}";
-@source "../**/*.{ts,tsx}";
-@source "../../../auth-react/src/**/*.{ts,tsx}";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --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);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --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);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --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);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}