@mbao01/ui 0.1.6 → 0.1.8

package/README.md

@@ -36,7 +36,7 @@ export default {
     ...
   ],
   "plugins": [
-    require("@mbao01/common/plugin"), // -> import the tailwind library plugin
+    ...require("@mbao01/common/plugin"), // -> import the tailwind library plugin
     ...
   ]
 }

package/dist/types/components/Link/constant.d.ts

@@ -1,5 +1,4 @@
-import { LinkVariant } from './types';
-export declare const getLinkClasses: ({ hover, variant }: {
-    hover?: boolean | undefined;
-    variant?: LinkVariant | undefined;
-}) => string;
+export declare const getLinkClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+    hover?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Link/types.d.ts

@@ -1,7 +1,6 @@
 import type { To, LinkProps as RouterLinkProps } from "react-router-dom";
-export type LinkVariant = "default" | "neutral" | "primary" | "secondary" | "accent" | "link" | "info" | "success" | "warning" | "error";
+import { type VariantProps } from "@mbao01/common/libs";
+import { getLinkClasses } from "./constant";
 export type LinkProps = Omit<RouterLinkProps, "to"> & {
     href: To;
-    hover?: boolean;
-    variant?: LinkVariant;
-};
+} & VariantProps<typeof getLinkClasses>;

package/dist/types/index.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/ui",
   "private": false,
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -40,8 +40,8 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@heroicons/react": "^2.1.1",
-    "@mbao01/common": "^0.0.5",
+    "@mbao01/common": "^0.0.7",
+    "@radix-ui/react-icons": "^1.3.0",
     "clsx": "^2.1.0"
   },
   "devDependencies": {
@@ -87,5 +87,5 @@
   "peerDependencies": {
     "react-router-dom": "^6.22.0"
   },
-  "gitHead": "d40fb1867ee09180de85ab18ffe74c4436e43413"
+  "gitHead": "5a26b3e951c2b2a1a6cf5cb597129bc25a336a2d"
 }

package/src/components/Link/Link.tsx

@@ -1,8 +1,8 @@
-import c from "clsx";
 import { Link as RouterLink } from "react-router-dom";
-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 = ({
   href,
@@ -15,16 +15,14 @@ export const Link = ({
 }: LinkProps) => {
   return (
     <RouterLink
-      {...props}
       to={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" />
       )}
     </RouterLink>
   );

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,19 +1,7 @@
 import type { To, LinkProps as RouterLinkProps } from "react-router-dom";
-
-export type LinkVariant =
-  | "default"
-  | "neutral"
-  | "primary"
-  | "secondary"
-  | "accent"
-  | "link"
-  | "info"
-  | "success"
-  | "warning"
-  | "error";
+import { type VariantProps } from "@mbao01/common/libs";
+import { getLinkClasses } from "./constant";
 
 export type LinkProps = Omit<RouterLinkProps, "to"> & {
   href: To;
-  hover?: boolean;
-  variant?: LinkVariant;
-};
+} & VariantProps<typeof getLinkClasses>;

package/src/index.ts

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

package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,2 +0,0 @@
-import type { BreadcrumbsProps } from "./types";
-export declare const Breadcrumbs: ({ root, labels }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Breadcrumbs/constant.d.ts

@@ -1,6 +0,0 @@
-export declare const getBreadcrumbs: (pathname: string, labels?: Record<string, string>) => {
-    href: {
-        pathname: string;
-    };
-    segment: string;
-}[];

package/dist/types/components/Breadcrumbs/index.d.ts

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

package/dist/types/components/Breadcrumbs/types.d.ts

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

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,30 +0,0 @@
-import { useLocation } from "react-router-dom";
-import { getBreadcrumbs } from "./constant";
-import type { BreadcrumbsProps } from "./types";
-import { Link } from "../Link";
-
-export const Breadcrumbs = ({ root, labels }: BreadcrumbsProps) => {
-  const location = useLocation();
-  const breadcrumbs = getBreadcrumbs(location.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,17 +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 },
-      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      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>;
-};