@mesob/ui 0.1.0 → 0.2.0

package/dist/components/link.js

@@ -0,0 +1,51 @@
+"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/components/link.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Link({
+  href,
+  children,
+  className,
+  onClick,
+  ...props
+}) {
+  const mesob = useMesob();
+  const LinkComponent = mesob?.linkComponent ?? "a";
+  if (LinkComponent === "a") {
+    return /* @__PURE__ */ jsx3("a", { href, className, onClick, ...props, children });
+  }
+  return /* @__PURE__ */ jsx3(
+    LinkComponent,
+    {
+      href,
+      className,
+      onClick,
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Link
+};
+//# sourceMappingURL=link.js.map

package/dist/components/link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/tooltip.tsx","../../src/components/mesob-context.tsx","../../src/components/link.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","'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 type { ComponentProps, ReactNode } from 'react';\nimport { useMesob } from './mesob-context';\n\nexport type LinkProps = {\n  href: string;\n  children: ReactNode;\n  className?: string;\n  onClick?: () => void;\n};\n\nexport function Link({\n  href,\n  children,\n  className,\n  onClick,\n  ...props\n}: LinkProps & ComponentProps<'a'>) {\n  const mesob = useMesob();\n  const LinkComponent = mesob?.linkComponent ?? 'a';\n\n  if (LinkComponent === 'a') {\n    return (\n      <a href={href} className={className} onClick={onClick} {...props}>\n        {children}\n      </a>\n    );\n  }\n\n  return (\n    <LinkComponent\n      href={href}\n      className={className}\n      onClick={onClick}\n      {...props}\n    >\n      {children}\n    </LinkComponent>\n  );\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;;;AC5CM,gBAAAC,YAAA;AAZC,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,QAAM,QAAQ,SAAS;AACvB,QAAM,gBAAgB,OAAO,iBAAiB;AAE9C,MAAI,kBAAkB,KAAK;AACzB,WACE,gBAAAA,KAAC,OAAE,MAAY,WAAsB,SAAmB,GAAG,OACxD,UACH;AAAA,EAEJ;AAEA,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":["jsx","jsx"]}

package/dist/components/mesob-context.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ComponentType } from 'react';
+
+type MesobLinkProps = {
+    href: string;
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+};
+type Router = {
+    push: (href: string) => void;
+    replace: (href: string) => void;
+    back: () => void;
+    forward: () => void;
+    refresh: () => void;
+    prefetch: (href: string) => void;
+};
+type MesobContextValue = {
+    linkComponent?: ComponentType<MesobLinkProps>;
+    t?: (key: string, params?: Record<string, string | number>) => string;
+    router?: Router;
+};
+type MesobProviderProps = {
+    children: ReactNode;
+    linkComponent?: ComponentType<MesobLinkProps>;
+    /** Hook that returns the app's t function (e.g. from next-intl useTranslations()). */
+    useTranslation?: () => (key: string, params?: Record<string, string | number>) => string;
+    /** Hook that returns the app's router (e.g. from next-intl useRouter()). */
+    useRouter?: () => Router;
+};
+declare function MesobProvider({ children, linkComponent, useTranslation, useRouter, }: MesobProviderProps): react_jsx_runtime.JSX.Element;
+declare function useMesob(): MesobContextValue | null;
+
+export { type MesobContextValue, type MesobLinkProps, MesobProvider, type MesobProviderProps, type Router, useMesob };

package/dist/components/mesob-context.js

@@ -0,0 +1,53 @@
+"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";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+
+// src/components/mesob-context.tsx
+import {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MesobContext = createContext(null);
+function MesobProvider({
+  children,
+  linkComponent,
+  useTranslation,
+  useRouter
+}) {
+  const t = useTranslation?.();
+  const router = useRouter?.();
+  const value = useMemo(
+    () => ({ linkComponent, t: t ?? void 0, router: router ?? void 0 }),
+    [linkComponent, t, router]
+  );
+  return /* @__PURE__ */ jsx2(MesobContext.Provider, { value, children: /* @__PURE__ */ jsx2(TooltipProvider, { delayDuration: 0, children }) });
+}
+function useMesob() {
+  return useContext(MesobContext);
+}
+export {
+  MesobProvider,
+  useMesob
+};
+//# sourceMappingURL=mesob-context.js.map

package/dist/components/mesob-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/tooltip.tsx","../../src/components/mesob-context.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","'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":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;;;ACExB,YAAY,sBAAsB;AAQ9B,cAiCE,YAjCF;AALJ,SAAS,gBAAgB;AAAA,EACvB,gBAAgB;AAAA,EAChB,GAAG;AACL,GAA2D;AACzD,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;;;ACdA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAoDD,gBAAAA,YAAA;AA5BN,IAAM,eAAe,cAAwC,IAAI;AAc1D,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,IAAI,iBAAiB;AAC3B,QAAM,SAAS,YAAY;AAC3B,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,eAAe,GAAG,KAAK,QAAW,QAAQ,UAAU,OAAU;AAAA,IACvE,CAAC,eAAe,GAAG,MAAM;AAAA,EAC3B;AACA,SACE,gBAAAA,KAAC,aAAa,UAAb,EAAsB,OACrB,0BAAAA,KAAC,mBAAgB,eAAe,GAAI,UAAS,GAC/C;AAEJ;AAEO,SAAS,WAAqC;AACnD,SAAO,WAAW,YAAY;AAChC;","names":["jsx"]}

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

@@ -0,0 +1,46 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type PageBodyProps = {
+    className?: string;
+    children: ReactNode;
+};
+declare function PageBody({ className, children }: PageBodyProps): react_jsx_runtime.JSX.Element;
+
+type PageContainerProps = {
+    className?: string;
+    children: ReactNode;
+};
+declare function PageContainer({ className, children }: PageContainerProps): react_jsx_runtime.JSX.Element;
+
+type PageGoBackProps = {
+    onBack: () => void;
+    label?: string;
+    className?: string;
+    children?: ReactNode;
+};
+declare function PageGoBack({ onBack, label, className, children, }: PageGoBackProps): react_jsx_runtime.JSX.Element;
+
+type PageSectionProps = {
+    title?: ReactNode;
+    className?: string;
+    children: ReactNode;
+};
+declare function PageSection({ title, className, children }: PageSectionProps): react_jsx_runtime.JSX.Element;
+
+type PageSubTitleProps = {
+    className?: string;
+    children: ReactNode;
+};
+declare function PageSubTitle({ className, children }: PageSubTitleProps): react_jsx_runtime.JSX.Element;
+
+type PageTitleProps = {
+    icon?: ReactNode;
+    back?: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+declare function PageTitle({ icon, back, action, children, className, }: PageTitleProps): react_jsx_runtime.JSX.Element;
+
+export { PageBody, PageContainer, PageGoBack, PageSection, PageSubTitle, PageTitle };

package/dist/components/page/index.js

@@ -0,0 +1,197 @@
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/page/page-body.tsx
+import { jsx } from "react/jsx-runtime";
+function PageBody({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 px-4", className), children });
+}
+
+// src/components/page/page-container.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function PageContainer({ className, children }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn("pb-4", className), children });
+}
+
+// src/components/page/page-go-back.tsx
+import { IconArrowLeft } from "@tabler/icons-react";
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx3 } 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",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx3(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, children });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "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",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx4(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components/page/page-go-back.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function PageGoBack({
+  onBack,
+  label = "Go back",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx5(TooltipProvider, { children: /* @__PURE__ */ jsxs2(Tooltip, { children: [
+    /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: onBack,
+        className: cn(className),
+        "aria-label": label,
+        children: children ?? /* @__PURE__ */ jsx5(IconArrowLeft, { className: "size-4", stroke: 1.5 })
+      }
+    ) }),
+    /* @__PURE__ */ jsx5(TooltipContent, { side: "bottom", children: label })
+  ] }) });
+}
+
+// src/components/page/page-section.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function PageSection({ title, className, children }) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-4", className), children: [
+    title ? /* @__PURE__ */ jsx6("h4", { className: "font-medium text-foreground", children: title }) : null,
+    children
+  ] });
+}
+
+// src/components/page/page-subtitle.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function PageSubTitle({ className, children }) {
+  return /* @__PURE__ */ jsx7("span", { className: cn("text-sm text-muted-foreground", className), children });
+}
+
+// src/components/page/page-title.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function PageTitle({
+  icon,
+  back,
+  action,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "flex min-h-12 items-center gap-2 border-b text-foreground",
+        className
+      ),
+      children: [
+        back ?? null,
+        icon ?? null,
+        /* @__PURE__ */ jsxs4("div", { className: "flex grow items-center justify-between", children: [
+          /* @__PURE__ */ jsx8("h3", { className: "font-medium", children }),
+          action ?? null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  PageBody,
+  PageContainer,
+  PageGoBack,
+  PageSection,
+  PageSubTitle,
+  PageTitle
+};
+//# sourceMappingURL=index.js.map

package/dist/components/page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/page/page-body.tsx","../../../src/components/page/page-container.tsx","../../../src/components/page/page-go-back.tsx","../../../src/components/button.tsx","../../../src/components/tooltip.tsx","../../../src/components/page/page-section.tsx","../../../src/components/page/page-subtitle.tsx","../../../src/components/page/page-title.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 type { ReactNode } from 'react';\n\ntype PageBodyProps = {\n  className?: string;\n  children: ReactNode;\n};\n\nexport function PageBody({ className, children }: PageBodyProps) {\n  return (\n    <div className={cn('flex flex-col gap-4 px-4', className)}>{children}</div>\n  );\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport type { ReactNode } from 'react';\n\ntype PageContainerProps = {\n  className?: string;\n  children: ReactNode;\n};\n\nexport function PageContainer({ className, children }: PageContainerProps) {\n  return <div className={cn('pb-4', className)}>{children}</div>;\n}\n","'use client';\n\nimport { cn } from '@mesob/ui/lib/utils';\nimport { IconArrowLeft } from '@tabler/icons-react';\nimport type { ReactNode } from 'react';\nimport { Button } from '../button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../tooltip';\n\ntype PageGoBackProps = {\n  onBack: () => void;\n  label?: string;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport function PageGoBack({\n  onBack,\n  label = 'Go back',\n  className,\n  children,\n}: PageGoBackProps) {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            onClick={onBack}\n            className={cn(className)}\n            aria-label={label}\n          >\n            {children ?? <IconArrowLeft className=\"size-4\" stroke={1.5} />}\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\">{label}</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\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 { 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","import { cn } from '@mesob/ui/lib/utils';\nimport type { ReactNode } from 'react';\n\ntype PageSectionProps = {\n  title?: ReactNode;\n  className?: string;\n  children: ReactNode;\n};\n\nexport function PageSection({ title, className, children }: PageSectionProps) {\n  return (\n    <div className={cn('flex flex-col gap-4', className)}>\n      {title ? <h4 className=\"font-medium text-foreground\">{title}</h4> : null}\n      {children}\n    </div>\n  );\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport type { ReactNode } from 'react';\n\ntype PageSubTitleProps = {\n  className?: string;\n  children: ReactNode;\n};\n\nexport function PageSubTitle({ className, children }: PageSubTitleProps) {\n  return (\n    <span className={cn('text-sm text-muted-foreground', className)}>\n      {children}\n    </span>\n  );\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport type { ReactNode } from 'react';\n\ntype PageTitleProps = {\n  icon?: ReactNode;\n  back?: ReactNode;\n  action?: ReactNode;\n  children: ReactNode;\n  className?: string;\n};\n\nexport function PageTitle({\n  icon,\n  back,\n  action,\n  children,\n  className,\n}: PageTitleProps) {\n  return (\n    <div\n      className={cn(\n        'flex min-h-12 items-center gap-2 border-b text-foreground',\n        className,\n      )}\n    >\n      {back ?? null}\n      {icon ?? null}\n      <div className=\"flex grow items-center justify-between\">\n        <h3 className=\"font-medium\">{children}</h3>\n        {action ?? null}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsx","jsx","jsx","jsxs","jsx","jsxs","jsx","jsx","jsxs"]}

package/dist/components/powered-by.d.ts

@@ -1,5 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function PoweredBy(): react_jsx_runtime.JSX.Element;
+type PoweredByProps = {
+    className?: string;
+};
+declare function PoweredBy({ className }: PoweredByProps): react_jsx_runtime.JSX.Element;
 
 export { PoweredBy };

package/dist/components/powered-by.js

@@ -1,3 +1,10 @@
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
 // src/components/mesob-logo.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function MesobLogo({
@@ -77,20 +84,29 @@ function MesobLogo({
 
 // src/components/powered-by.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function PoweredBy() {
-  return /* @__PURE__ */ jsx2("div", { className: "pt-4 pb-2 text-center", children: /* @__PURE__ */ jsxs2(
-    "a",
+function PoweredBy({ className }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
     {
-      href: "https://mesob.com",
-      target: "_blank",
-      className: "flex items-center justify-center gap-2",
-      rel: "noopener noreferrer",
-      children: [
-        /* @__PURE__ */ jsx2("span", { className: "text-xs", children: "Powered by" }),
-        /* @__PURE__ */ jsx2(MesobLogo, { height: 16 })
-      ]
+      className: cn(
+        "flex flex-col items-center gap-1.5 py-3 text-center",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs2(
+        "a",
+        {
+          href: "https://mesob.com",
+          target: "_blank",
+          className: "text-muted-foreground hover:text-foreground flex items-center justify-center gap-1.5 text-[13px] transition-colors",
+          rel: "noopener noreferrer",
+          children: [
+            /* @__PURE__ */ jsx2("span", { children: "Powered by" }),
+            /* @__PURE__ */ jsx2(MesobLogo, { height: 18 })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 export {
   PoweredBy

package/dist/components/powered-by.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/mesob-logo.tsx","../../src/components/powered-by.tsx"],"sourcesContent":["type MesobLogoProps = {\n  width?: number;\n  height?: number;\n  textColor?: string;\n  iconBackgroundColor?: string;\n  iconColor?: string;\n  className?: string;\n};\n\nexport function MesobLogo({\n  width,\n  height,\n  textColor = '#09f',\n  iconBackgroundColor = '#19e',\n  iconColor = '#fff',\n  className,\n}: MesobLogoProps) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 315.9 98.15\"\n      width={width}\n      height={height}\n      aria-label=\"Mesob Logo\"\n      role=\"presentation\"\n      className={className}\n    >\n      <path\n        d=\"M158.89,21.29v44q0,9.15-5.3,14.23t-14.18,5.07q-9,0-14.5-5.21t-5.52-14.54H132a10,10,0,0,0,1.93,6.28,6.49,6.49,0,0,0,5.34,2.25,6.4,6.4,0,0,0,5.21-2.16,9,9,0,0,0,1.79-5.92v-44Z\"\n        fill={textColor}\n      />\n      <path\n        d=\"M174.38,26.18a7,7,0,0,1-2.2-5.25,7,7,0,0,1,2.2-5.25,8.28,8.28,0,0,1,11,0,7,7,0,0,1,2.2,5.25,7,7,0,0,1-2.2,5.25,8.28,8.28,0,0,1-11,0Zm11.71,8V84H173.52V34.22Z\"\n        fill={textColor}\n      />\n      <path\n        d=\"M217.38,35.74a17.65,17.65,0,0,1,8.93-2.24V46.69H223q-5.93,0-8.94,2.79t-3,9.69V84H198.48V34.22h12.57v7.72A17.57,17.57,0,0,1,217.38,35.74Z\"\n        fill={textColor}\n      />\n      <path\n        d=\"M280.62,62.85H244.26A12.38,12.38,0,0,0,248,71.29a11.62,11.62,0,0,0,8.17,3q7,0,10-6h13.55a22.59,22.59,0,0,1-8.26,11.8,24.05,24.05,0,0,1-15,4.63,25.87,25.87,0,0,1-12.88-3.19,22.44,22.44,0,0,1-8.89-9,27.7,27.7,0,0,1-3.18-13.47,28.09,28.09,0,0,1,3.14-13.55,21.92,21.92,0,0,1,8.79-9,28.27,28.27,0,0,1,25.72-.09,21.49,21.49,0,0,1,8.71,8.66A26.18,26.18,0,0,1,281,58,29.48,29.48,0,0,1,280.62,62.85ZM268,54.41a9.93,9.93,0,0,0-3.5-7.76,12.43,12.43,0,0,0-8.35-2.92,11.37,11.37,0,0,0-7.85,2.83,12.4,12.4,0,0,0-3.91,7.85Z\"\n        fill={textColor}\n      />\n      <path\n        d=\"M304.77,44.54V68.6A4.73,4.73,0,0,0,306,72.23a6,6,0,0,0,4.09,1.13h5.83V84H308q-15.88,0-15.89-15.44v-24h-5.92V34.22h5.92V21.92h12.66v12.3H315.9V44.54Z\"\n        fill={textColor}\n      />\n      <rect\n        width=\"98.15\"\n        height=\"98.15\"\n        rx=\"20.49\"\n        fill={iconBackgroundColor}\n      />\n      <path\n        d=\"M59.84,54.58a15.77,15.77,0,0,0,6.7,3.6,30.16,30.16,0,0,0,8.56.48l-.36,13.89a46.14,46.14,0,0,1-6,.43,33.3,33.3,0,0,1-6.42-.56,27.77,27.77,0,0,1-6.23-1.93,23.13,23.13,0,0,1-5.67-3.64,17.61,17.61,0,0,1-4.87-6.67c-1-2.53-1.89-4.88-2.57-7a51.59,51.59,0,0,0-1.79-4.94,10.55,10.55,0,0,0-2.82-4,17.36,17.36,0,0,0-6.66-3.74A28.24,28.24,0,0,0,23,39.8l1-14.38a44.34,44.34,0,0,1,5.87-.25,34.47,34.47,0,0,1,6.2.72A30.31,30.31,0,0,1,42.28,28a24.51,24.51,0,0,1,5.85,3.8,18.32,18.32,0,0,1,4.92,6.54,70.94,70.94,0,0,1,2.59,6.9c.53,1.7,1.06,3.42,1.59,5.18A8.77,8.77,0,0,0,59.84,54.58Z\"\n        fill={iconColor}\n      />\n    </svg>\n  );\n}\n","import { MesobLogo } from './mesob-logo';\n\nexport function PoweredBy() {\n  return (\n    <div className=\"pt-4 pb-2 text-center\">\n      <a\n        href=\"https://mesob.com\"\n        target=\"_blank\"\n        className=\"flex items-center justify-center gap-2\"\n        rel=\"noopener noreferrer\"\n      >\n        <span className=\"text-xs\">Powered by</span>\n        <MesobLogo height={16} />\n      </a>\n    </div>\n  );\n}\n"],"mappings":";AAkBI,SASE,KATF;AATG,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ;AACF,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,cAAW;AAAA,MACX,MAAK;AAAA,MACL;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA;AAAA;AAAA,EACF;AAEJ;;;ACtDM,SAME,OAAAA,MANF,QAAAC,aAAA;AAHC,SAAS,YAAY;AAC1B,SACE,gBAAAD,KAAC,SAAI,WAAU,yBACb,0BAAAC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAO;AAAA,MACP,WAAU;AAAA,MACV,KAAI;AAAA,MAEJ;AAAA,wBAAAD,KAAC,UAAK,WAAU,WAAU,wBAAU;AAAA,QACpC,gBAAAA,KAAC,aAAU,QAAQ,IAAI;AAAA;AAAA;AAAA,EACzB,GACF;AAEJ;","names":["jsx","jsxs"]}
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/mesob-logo.tsx","../../src/components/powered-by.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","type MesobLogoProps = {\n  width?: number;\n  height?: number;\n  textColor?: string;\n  iconBackgroundColor?: string;\n  iconColor?: string;\n  className?: string;\n};\n\nexport function MesobLogo({\n  width,\n  height,\n  textColor = '#09f',\n  iconBackgroundColor = '#19e',\n  iconColor = '#fff',\n  className,\n}: MesobLogoProps) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 315.9 98.15\"\n      width={width}\n      height={height}\n      aria-label=\"Mesob Logo\"\n      role=\"presentation\"\n      className={className}\n    >\n      <path\n        d=\"M158.89,21.29v44q0,9.15-5.3,14.23t-14.18,5.07q-9,0-14.5-5.21t-5.52-14.54H132a10,10,0,0,0,1.93,6.28,6.49,6.49,0,0,0,5.34,2.25,6.4,6.4,0,0,0,5.21-2.16,9,9,0,0,0,1.79-5.92v-44Z\"\n        fill={textColor}\n      />\n      <path\n        d=\"M174.38,26.18a7,7,0,0,1-2.2-5.25,7,7,0,0,1,2.2-5.25,8.28,8.28,0,0,1,11,0,7,7,0,0,1,2.2,5.25,7,7,0,0,1-2.2,5.25,8.28,8.28,0,0,1-11,0Zm11.71,8V84H173.52V34.22Z\"\n        fill={textColor}\n      />\n      <path\n        d=\"M217.38,35.74a17.65,17.65,0,0,1,8.93-2.24V46.69H223q-5.93,0-8.94,2.79t-3,9.69V84H198.48V34.22h12.57v7.72A17.57,17.57,0,0,1,217.38,35.74Z\"\n        fill={textColor}\n      />\n      <path\n        d=\"M280.62,62.85H244.26A12.38,12.38,0,0,0,248,71.29a11.62,11.62,0,0,0,8.17,3q7,0,10-6h13.55a22.59,22.59,0,0,1-8.26,11.8,24.05,24.05,0,0,1-15,4.63,25.87,25.87,0,0,1-12.88-3.19,22.44,22.44,0,0,1-8.89-9,27.7,27.7,0,0,1-3.18-13.47,28.09,28.09,0,0,1,3.14-13.55,21.92,21.92,0,0,1,8.79-9,28.27,28.27,0,0,1,25.72-.09,21.49,21.49,0,0,1,8.71,8.66A26.18,26.18,0,0,1,281,58,29.48,29.48,0,0,1,280.62,62.85ZM268,54.41a9.93,9.93,0,0,0-3.5-7.76,12.43,12.43,0,0,0-8.35-2.92,11.37,11.37,0,0,0-7.85,2.83,12.4,12.4,0,0,0-3.91,7.85Z\"\n        fill={textColor}\n      />\n      <path\n        d=\"M304.77,44.54V68.6A4.73,4.73,0,0,0,306,72.23a6,6,0,0,0,4.09,1.13h5.83V84H308q-15.88,0-15.89-15.44v-24h-5.92V34.22h5.92V21.92h12.66v12.3H315.9V44.54Z\"\n        fill={textColor}\n      />\n      <rect\n        width=\"98.15\"\n        height=\"98.15\"\n        rx=\"20.49\"\n        fill={iconBackgroundColor}\n      />\n      <path\n        d=\"M59.84,54.58a15.77,15.77,0,0,0,6.7,3.6,30.16,30.16,0,0,0,8.56.48l-.36,13.89a46.14,46.14,0,0,1-6,.43,33.3,33.3,0,0,1-6.42-.56,27.77,27.77,0,0,1-6.23-1.93,23.13,23.13,0,0,1-5.67-3.64,17.61,17.61,0,0,1-4.87-6.67c-1-2.53-1.89-4.88-2.57-7a51.59,51.59,0,0,0-1.79-4.94,10.55,10.55,0,0,0-2.82-4,17.36,17.36,0,0,0-6.66-3.74A28.24,28.24,0,0,0,23,39.8l1-14.38a44.34,44.34,0,0,1,5.87-.25,34.47,34.47,0,0,1,6.2.72A30.31,30.31,0,0,1,42.28,28a24.51,24.51,0,0,1,5.85,3.8,18.32,18.32,0,0,1,4.92,6.54,70.94,70.94,0,0,1,2.59,6.9c.53,1.7,1.06,3.42,1.59,5.18A8.77,8.77,0,0,0,59.84,54.58Z\"\n        fill={iconColor}\n      />\n    </svg>\n  );\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport { MesobLogo } from './mesob-logo';\n\ntype PoweredByProps = {\n  className?: string;\n};\n\nexport function PoweredBy({ className }: PoweredByProps) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center gap-1.5 py-3 text-center',\n        className,\n      )}\n    >\n      <a\n        href=\"https://mesob.com\"\n        target=\"_blank\"\n        className=\"text-muted-foreground hover:text-foreground flex items-center justify-center gap-1.5 text-[13px] transition-colors\"\n        rel=\"noopener noreferrer\"\n      >\n        <span>Powered by</span>\n        <MesobLogo height={18} />\n      </a>\n    </div>\n  );\n}\n"],"mappings":";AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACaI,SASE,KATF;AATG,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ;AACF,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,cAAW;AAAA,MACX,MAAK;AAAA,MACL;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,MAAM;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAM;AAAA;AAAA,QACR;AAAA;AAAA;AAAA,EACF;AAEJ;;;AC5CM,SAME,OAAAA,MANF,QAAAC,aAAA;AARC,SAAS,UAAU,EAAE,UAAU,GAAmB;AACvD,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA,0BAAAC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,WAAU;AAAA,UACV,KAAI;AAAA,UAEJ;AAAA,4BAAAD,KAAC,UAAK,wBAAU;AAAA,YAChB,gBAAAA,KAAC,aAAU,QAAQ,IAAI;AAAA;AAAA;AAAA,MACzB;AAAA;AAAA,EACF;AAEJ;","names":["jsx","jsxs"]}

package/dist/components/shell.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type ShellProps = {
+    sidebar: React.ReactNode;
+    headerActions?: React.ReactNode;
+    children: React.ReactNode;
+    showToaster?: boolean;
+    contentClassName?: string;
+};
+declare function Shell({ sidebar, headerActions, children, showToaster, contentClassName, }: ShellProps): react_jsx_runtime.JSX.Element;
+
+export { Shell };