@mbao01/common 0.0.49 → 0.0.50

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

@@ -0,0 +1,20 @@
+import { BreadcrumbEllipsisProps, BreadcrumbItemProps, BreadcrumbListProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparatorProps } from './types';
+declare const Breadcrumb: {
+    ({ children, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    List: import('react').ForwardRefExoticComponent<BreadcrumbListProps & import('react').RefAttributes<HTMLOListElement>>;
+    Item: import('react').ForwardRefExoticComponent<BreadcrumbItemProps & import('react').RefAttributes<HTMLLIElement>>;
+    Link: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & {
+        asChild?: boolean;
+    } & import('react').RefAttributes<HTMLAnchorElement>>;
+    Page: import('react').ForwardRefExoticComponent<BreadcrumbPageProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Separator: {
+        ({ children, className, ...props }: BreadcrumbSeparatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Ellipsis: {
+        ({ className, ...props }: BreadcrumbEllipsisProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { Breadcrumb };

package/dist/types/components/Breadcrumb/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const getBreadcrumbListClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getBreadcrumbItemClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getBreadcrumbLinkClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getBreadcrumbPageClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getBreadcrumbSeparatorClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getBreadcrumbEllipsisClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

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

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type BreadcrumbProps = React.HTMLAttributes<HTMLElement> & {
+    separator?: ReactNode;
+};
+export type BreadcrumbListProps = React.HTMLAttributes<HTMLUListElement>;
+export type BreadcrumbItemProps = React.HTMLAttributes<HTMLLIElement>;
+export type BreadcrumbLinkProps = React.HTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+};
+export type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
+export type BreadcrumbSeparatorProps = React.HTMLAttributes<HTMLLIElement>;
+export type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 /** actions */
 export * from './components/Anchor';
 export * from './components/Button';
-export * from './components/Breadcrumbs';
+export * from './components/Breadcrumb';
 export * from './components/Menu';
 export * from './components/Pagination';
 export * from './components/ThemeSwitch';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.49",
+  "version": "0.0.50",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -171,5 +171,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "86697af331eb24f58fb8689ebd8ca76d302ad387"
+  "gitHead": "1a3e0a5b712ff6dbb8fc8265056caedc28b2c00c"
 }

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,99 @@
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRightIcon, EllipsisIcon } from "lucide-react";
+import type {
+  BreadcrumbEllipsisProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListProps,
+  BreadcrumbPageProps,
+  BreadcrumbProps,
+  BreadcrumbSeparatorProps,
+} from "./types";
+import { cn } from "../../utilities";
+import {
+  getBreadcrumbEllipsisClasses,
+  getBreadcrumbItemClasses,
+  getBreadcrumbLinkClasses,
+  getBreadcrumbListClasses,
+  getBreadcrumbPageClasses,
+  getBreadcrumbSeparatorClasses,
+} from "./constants";
+
+const Breadcrumb = ({ children, ...props }: BreadcrumbProps) => (
+  <nav aria-label="breadcrumb" {...props}>
+    {children}
+  </nav>
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
+  ({ className, ...props }, ref) => (
+    <ol ref={ref} className={cn(getBreadcrumbListClasses(), className)} {...props} />
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn(getBreadcrumbItemClasses(), className)} {...props} />
+  )
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+
+    return <Comp ref={ref} className={cn(getBreadcrumbLinkClasses(), className)} {...props} />;
+  }
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn(getBreadcrumbPageClasses(), className)}
+      {...props}
+    />
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: BreadcrumbSeparatorProps) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn(getBreadcrumbSeparatorClasses(), className)}
+    {...props}
+  >
+    {children ?? <ChevronRightIcon />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: BreadcrumbEllipsisProps) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn(getBreadcrumbEllipsisClasses(), className)}
+    {...props}
+  >
+    <EllipsisIcon className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+Breadcrumb.List = BreadcrumbList;
+Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Link = BreadcrumbLink;
+Breadcrumb.Page = BreadcrumbPage;
+Breadcrumb.Separator = BreadcrumbSeparator;
+Breadcrumb.Ellipsis = BreadcrumbEllipsis;
+
+export { Breadcrumb };

package/src/components/Breadcrumb/constants.ts

@@ -0,0 +1,15 @@
+import { cva } from "../../libs";
+
+export const getBreadcrumbListClasses = cva(
+  "flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5"
+);
+
+export const getBreadcrumbItemClasses = cva("inline-flex items-center gap-1.5");
+
+export const getBreadcrumbLinkClasses = cva("transition-colors");
+
+export const getBreadcrumbPageClasses = cva("font-normal");
+
+export const getBreadcrumbSeparatorClasses = cva("[&>svg]:w-3.5 [&>svg]:h-3.5");
+
+export const getBreadcrumbEllipsisClasses = cva("flex h-9 w-9 items-center justify-center");

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1 @@
+export { Breadcrumb } from "./Breadcrumb";

package/src/components/Breadcrumb/types.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+export type BreadcrumbProps = React.HTMLAttributes<HTMLElement> & {
+  separator?: ReactNode;
+};
+
+export type BreadcrumbListProps = React.HTMLAttributes<HTMLUListElement>;
+
+export type BreadcrumbItemProps = React.HTMLAttributes<HTMLLIElement>;
+
+export type BreadcrumbLinkProps = React.HTMLAttributes<HTMLAnchorElement> & {
+  asChild?: boolean;
+};
+
+export type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
+
+export type BreadcrumbSeparatorProps = React.HTMLAttributes<HTMLLIElement>;
+
+export type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;

package/src/components/Sidebar/stories/examples/components/AppMain.tsx

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from "react";
-import { Breadcrumbs } from "../../../../Breadcrumbs";
-import { Breadcrumb } from "../../../../Breadcrumbs/Breadcrumbs";
+import { Breadcrumb } from "../../../../Breadcrumb";
 import { Sidebar } from "../../../Sidebar";
 import { type SidebarProps } from "../../../types";
 
@@ -12,15 +11,15 @@ export const AppMain = ({
     <Sidebar.Inset {...props}>
       <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
         {side !== "right" ? <Sidebar.Trigger className="-ml-1" /> : null}
-        <Breadcrumbs>
-          <Breadcrumb className="hidden md:block">
-            <a href="#">Building Your Application</a>
-          </Breadcrumb>
-
-          <Breadcrumb>
-            <span>Data Fetching</span>
-          </Breadcrumb>
-        </Breadcrumbs>
+        <Breadcrumb>
+          <Breadcrumb.List>
+            <Breadcrumb.Link asChild className="hidden md:block">
+              <a href="#">Building Your Application</a>
+            </Breadcrumb.Link>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
+          </Breadcrumb.List>
+        </Breadcrumb>
         {side === "right" ? <Sidebar.Trigger className="-mr-1 ml-auto !rotate-180" /> : null}
       </header>
       <div className="flex flex-1 flex-col gap-4 p-4">

package/src/index.ts

@@ -1,7 +1,7 @@
 /** actions */
 export * from "./components/Anchor";
 export * from "./components/Button";
-export * from "./components/Breadcrumbs";
+export * from "./components/Breadcrumb";
 export * from "./components/Menu";
 export * from "./components/Pagination";
 export * from "./components/ThemeSwitch";

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

@@ -1,3 +0,0 @@
-import { BreadcrumbProps, BreadcrumbsProps } from './types';
-export declare const Breadcrumbs: (props: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Breadcrumb: (props: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,2 +0,0 @@
-export type BreadcrumbProps = React.HTMLAttributes<HTMLLIElement>;
-export type BreadcrumbsProps = React.HTMLAttributes<HTMLUListElement>;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,13 +0,0 @@
-import type { BreadcrumbProps, BreadcrumbsProps } from "./types";
-
-export const Breadcrumbs = (props: BreadcrumbsProps) => {
-  return (
-    <div className="breadcrumbs -ml-1 w-fit px-1 text-sm">
-      <ul {...props} />
-    </div>
-  );
-};
-
-export const Breadcrumb = (props: BreadcrumbProps) => {
-  return <li {...props} />;
-};

package/src/components/Breadcrumbs/index.ts

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

package/src/components/Breadcrumbs/types.ts

@@ -1,3 +0,0 @@
-export type BreadcrumbProps = React.HTMLAttributes<HTMLLIElement>;
-
-export type BreadcrumbsProps = React.HTMLAttributes<HTMLUListElement>;