@mbao01/common 0.0.49 → 0.0.51

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/components/Form/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
-import * as React from "react";
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLInputElement>, "type" | "ref" | "size"> & {
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<Omit<CheckboxPrimitive.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>, "ref">, "checked" | "onCheckedChange"> & {
     variant?: "accent" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
+    rounded?: "xs" | "sm" | "md" | "lg" | undefined;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 export { Checkbox };

package/dist/types/components/Form/Checkbox/constants.d.ts

@@ -1,4 +1,9 @@
 export declare const getCheckboxClasses: (props?: ({
     variant?: "accent" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    rounded?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getCheckboxIndicatorClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getCheckboxIconClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/types/components/Form/Checkbox/types.d.ts

@@ -1,3 +1,5 @@
+import { ComponentPropsWithoutRef } from 'react';
 import { VariantProps } from '../../../libs';
 import { getCheckboxClasses } from './constants';
-export type CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> & VariantProps<typeof getCheckboxClasses>;
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+export type CheckboxProps = Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked" | "onCheckedChange"> & VariantProps<typeof getCheckboxClasses>;

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.51",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -171,5 +171,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "86697af331eb24f58fb8689ebd8ca76d302ad387"
+  "gitHead": "4719b1effc0e198fed741e9001b853016f2563f6"
 }

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/Form/Checkbox/Checkbox.tsx

@@ -1,18 +1,39 @@
-import * as React from "react";
+import type { ElementRef } from "react";
+import { forwardRef, useState } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import { cn } from "../../../utilities";
-import { getCheckboxClasses } from "./constants";
+import {
+  getCheckboxClasses,
+  getCheckboxIconClasses,
+  getCheckboxIndicatorClasses,
+} from "./constants";
 import { type CheckboxProps } from "./types";
 
-const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, size, variant, ...props }, ref) => (
-    <input
-      ref={ref}
-      type="checkbox"
-      className={cn(getCheckboxClasses({ size, variant }), className)}
-      {...props}
-    />
-  )
+const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, size, rounded, variant, defaultChecked, ...props }, ref) => {
+    const [checked, setChecked] = useState<CheckboxPrimitive.CheckedState | undefined>(
+      defaultChecked
+    );
+
+    return (
+      <CheckboxPrimitive.Root
+        ref={ref}
+        checked={checked}
+        onCheckedChange={setChecked}
+        className={cn(getCheckboxClasses({ size, rounded, variant }), className)}
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator className={cn(getCheckboxIndicatorClasses())}>
+          {checked === "indeterminate" && (
+            <MinusIcon className={cn(getCheckboxIconClasses({ size }))} />
+          )}
+          {checked === true && <CheckIcon className={cn(getCheckboxIconClasses({ size }))} />}
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+    );
+  }
 );
-Checkbox.displayName = "Checkbox";
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };

package/src/components/Form/Checkbox/constants.ts

@@ -1,21 +1,48 @@
 import { cva } from "../../../libs";
 
-export const getCheckboxClasses = cva("checkbox", {
-  variants: {
-    variant: {
-      primary: "checkbox-primary",
-      secondary: "checkbox-secondary",
-      accent: "checkbox-accent",
-      success: "checkbox-success",
-      warning: "checkbox-warning",
-      info: "checkbox-info",
-      error: "checkbox-error",
+export const getCheckboxClasses = cva(
+  "peer flex items-center justify-center h-6 w-6 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary:
+          "border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-content",
+        secondary:
+          "border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-content",
+        accent:
+          "border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-content",
+        success:
+          "border-success data-[state=checked]:bg-success data-[state=checked]:text-success-content",
+        warning:
+          "border-warning data-[state=checked]:bg-warning data-[state=checked]:text-warning-content",
+        info: "border-info data-[state=checked]:bg-info data-[state=checked]:text-info-content",
+        error: "border-error data-[state=checked]:bg-error data-[state=checked]:text-error-content",
+      },
+      size: {
+        xs: "h-4 w-4",
+        sm: "h-5 w-5",
+        md: "h-6 w-6",
+        lg: "h-8 w-8",
+      },
+      rounded: {
+        xs: "rounded-xs",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+      },
     },
+  }
+);
+
+export const getCheckboxIndicatorClasses = cva("flex items-center justify-center text-current");
+
+export const getCheckboxIconClasses = cva("h-4 w-4", {
+  variants: {
     size: {
-      xs: "checkbox-xs",
-      sm: "checkbox-sm",
-      md: "checkbox-md",
-      lg: "checkbox-lg",
+      xs: "h-2.5 w-2.5",
+      sm: "h-3.5 w-3.5",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
     },
   },
 });

package/src/components/Form/Checkbox/types.ts

@@ -1,5 +1,10 @@
+import { ComponentPropsWithoutRef } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { type VariantProps } from "../../../libs";
 import { getCheckboxClasses } from "./constants";
 
-export type CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> &
+export type CheckboxProps = Omit<
+  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+  "checked" | "onCheckedChange"
+> &
   VariantProps<typeof getCheckboxClasses>;

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>;