@mbao01/next 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mbao01/next",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "private": false,
   "type": "module",
   "author": "Ayomide Bakare",
@@ -20,7 +20,7 @@
     "dist/types"
   ],
   "bugs": "https://github.com/mbao01/mbao01/issues",
-  "homepage": "https://next.ayomidebakare.site",
+  "homepage": "https://ui.ayomidebakare.site/next/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mbao01/mbao01.git"
@@ -42,8 +42,8 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@heroicons/react": "^2.1.1",
-    "@mbao01/common": "^0.0.4",
+    "@mbao01/common": "^0.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
     "clsx": "^2.1.0"
   },
   "devDependencies": {
@@ -93,5 +93,5 @@
   "peerDependencies": {
     "next": "^14.1.0"
   },
-  "gitHead": "90d186e3fc64e9dae9f8755fd057540a23e6a4cd"
+  "gitHead": "ceb6cef48e8547b4da5c51dda329bd6edee73c0b"
 }

package/src/components/Link/Link.tsx

@@ -1,8 +1,8 @@
-import c from "clsx";
 import NextLink from "next/link";
-import { getLinkClasses } from "./constant";
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import { cn } from "@mbao01/common/utilities";
 import { type LinkProps } from "./types";
-import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
+import { getLinkClasses } from "./constant";
 
 export const Link = <T,>({
   href,
@@ -15,16 +15,14 @@ export const Link = <T,>({
 }: LinkProps<T>) => {
   return (
     <NextLink
-      {...props}
       href={href}
-      className={c(getLinkClasses({ hover, variant }), className)}
+      target={target}
+      className={cn(getLinkClasses({ hover, variant }), className)}
+      {...props}
     >
       {children}
       {target === "_blank" && (
-        <ArrowUpRightIcon
-          name="external"
-          className="ml-[2px] inline h-4 w-4 align-middle"
-        />
+        <ExternalLinkIcon name="external" className="ml-[2px] inline" />
       )}
     </NextLink>
   );

package/src/components/Link/constant.ts

@@ -1,21 +1,21 @@
-import c from 'clsx';
-import { LinkVariant } from './types';
+import { cva } from "@mbao01/common/libs";
 
-const LINK_VARIANTS = {
-  accent: c('link-accent'),
-  default: c('link-default'),
-  error: c('link-error'),
-  info: c('link-info'),
-  link: c('link-link'),
-  neutral: c('link-neutral'),
-  primary: c('link-primary'),
-  secondary: c('link-secondary'),
-  success: c('link-success'),
-  warning: c('link-warning'),
-} satisfies Record<LinkVariant, string>;
-
-export const getLinkClasses = ({ hover, variant }: { hover?: boolean; variant?: LinkVariant }) => {
-  return c('link transition-all', LINK_VARIANTS[variant!], {
-    'link-hover': hover,
-  });
-};
+export const getLinkClasses = cva("link transition-all", {
+  variants: {
+    variant: {
+      accent: "link-accent",
+      default: "link-default",
+      error: "link-error",
+      info: "link-info",
+      link: "link-link",
+      neutral: "link-neutral",
+      primary: "link-primary",
+      secondary: "link-secondary",
+      success: "link-success",
+      warning: "link-warning",
+    },
+    hover: {
+      true: "link-hover",
+    },
+  },
+});

package/src/components/Link/types.ts

@@ -1,18 +1,6 @@
 import type { LinkProps as NextLinkProps } from "next/link";
+import { type VariantProps } from "@mbao01/common/libs";
+import { getLinkClasses } from "./constant";
 
-export type LinkVariant =
-  | "default"
-  | "neutral"
-  | "primary"
-  | "secondary"
-  | "accent"
-  | "link"
-  | "info"
-  | "success"
-  | "warning"
-  | "error";
-
-export type LinkProps<T> = NextLinkProps<T> & {
-  hover?: boolean;
-  variant?: LinkVariant;
-};
+export type LinkProps<T> = NextLinkProps<T> &
+  VariantProps<typeof getLinkClasses>;

package/src/index.ts

@@ -1,3 +1,3 @@
 export * from "@mbao01/common";
-export { Breadcrumbs } from "./components/Breadcrumbs";
+
 export { Link } from "./components/Link";

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,32 +0,0 @@
-"use client";
-import { usePathname } from "next/navigation";
-
-import { getBreadcrumbs } from "./constant";
-import type { BreadcrumbsProps } from "./types";
-import { Link } from "../Link";
-
-export const Breadcrumbs = ({ root, labels }: BreadcrumbsProps) => {
-  const pathname = usePathname();
-  const breadcrumbs = getBreadcrumbs(pathname, labels);
-
-  return (
-    <div className="breadcrumbs -ml-1 w-fit px-1 text-sm">
-      <ul>
-        {root && (
-          <li>
-            <Link hover href="/">
-              {root}
-            </Link>
-          </li>
-        )}
-        {breadcrumbs.map((crumb) => (
-          <li key={crumb.href.pathname}>
-            <Link hover href={crumb.href} className="capitalize">
-              {crumb.segment}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};

package/src/components/Breadcrumbs/constant.ts

@@ -1,16 +0,0 @@
-export const getBreadcrumbs = (
-  pathname: string,
-  labels?: Record<string, string>
-) => {
-  const segments = pathname.split("/").filter(Boolean);
-
-  const breadcrumbs = segments.map((segment, index) => {
-    const path = `/${segments.slice(0, index + 1).join("/")}`;
-    return {
-      href: { pathname: path },
-      segment: labels?.[segment] || segment, // always fallback to segment if label is falsy
-    };
-  });
-
-  return breadcrumbs;
-};

package/src/components/Breadcrumbs/index.ts

@@ -1 +0,0 @@
-export { Breadcrumbs } from './Breadcrumbs';

package/src/components/Breadcrumbs/types.ts

@@ -1,4 +0,0 @@
-export type BreadcrumbsProps = {
-  root?: string;
-  labels?: Record<string, string>;
-};