@mbao01/common 0.0.54 → 0.0.55

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

@@ -8,6 +8,7 @@ declare const Timeline: {
         variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
         status?: "default" | "success" | "active" | "failed" | "custom" | undefined;
         fill?: boolean | undefined;
+        border?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | undefined;
     }, "status"> & {
         status?: Exclude<"default" | "success" | "active" | "failed" | "custom" | undefined, "custom">;
     } & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -6,6 +6,7 @@ export declare const getTimelineItemClasses: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getTimelineDotClasses: (props?: ({
     status?: "default" | "success" | "active" | "failed" | "custom" | null | undefined;
+    border?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | null | undefined;
     fill?: boolean | null | undefined;
     variant?: "accent" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "content" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.54",
+  "version": "0.0.55",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -172,5 +172,5 @@
     "recharts": "^2.13.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "77ef19ebd010a166fc3e2f2405baa4a1737115e4"
+  "gitHead": "a1cade5cde1e079c2746a9c703f7bd5def5063f4"
 }

package/src/components/Timeline/Timeline.example.tsx

@@ -32,7 +32,7 @@ export const TimelineExample = ({
         <Timeline.Heading variant="content" {...heading}>
           Plan!
         </Timeline.Heading>
-        <Timeline.Dot status="success" variant="success" {...dot} />
+        <Timeline.Dot border="primary" status="success" variant="success" {...dot} />
         <Timeline.Line variant="success" {...line} />
         <Timeline.Content {...content}>
           Before diving into coding, it is crucial to plan your software project thoroughly.
@@ -41,13 +41,13 @@ export const TimelineExample = ({
       <Timeline.Item {...item}>
         <Timeline.Heading {...heading}>Done!</Timeline.Heading>
         <Timeline.Line {...line} />
-        <Timeline.Dot {...dot} />
+        <Timeline.Dot border="content" {...dot} />
       </Timeline.Item>
       <Timeline.Item {...item} variant="success">
         <Timeline.Heading {...heading} variant="success">
           Done!
         </Timeline.Heading>
-        <Timeline.Dot icon={<PlusIcon />} {...dot} />
+        <Timeline.Dot border="success" icon={<PlusIcon />} {...dot} />
       </Timeline.Item>
     </Timeline>
   );
@@ -67,7 +67,7 @@ export const TimelineAlternateExample = ({
         <Timeline.Heading side="left" {...heading}>
           Plan!
         </Timeline.Heading>
-        <Timeline.Dot status="success" {...dot} />
+        <Timeline.Dot border="neutral" status="success" {...dot} />
         <Timeline.Line variant="secondary" {...line} />
         <Timeline.Content side="left" {...content}>
           Before diving into coding, it is crucial to plan your software project thoroughly. This
@@ -80,7 +80,7 @@ export const TimelineAlternateExample = ({
         <Timeline.Heading side="right" className="text-destructive" {...heading}>
           Design
         </Timeline.Heading>
-        <Timeline.Dot status="failed" {...dot} />
+        <Timeline.Dot border="neutral" status="failed" variant="primary" {...dot} />
         <Timeline.Line variant="success" {...line} />
         <Timeline.Content>
           Designing your software involves creating a blueprint that outlines the structure, user
@@ -93,7 +93,7 @@ export const TimelineAlternateExample = ({
         <Timeline.Heading side="left" {...heading}>
           Code
         </Timeline.Heading>
-        <Timeline.Dot status="active" {...dot} />
+        <Timeline.Dot border="success" status="active" variant="accent" {...dot} />
         <Timeline.Line {...line} />
         <Timeline.Content side="left" {...content}>
           The coding phase involves translating your design into actual code. Choose a programming
@@ -104,7 +104,7 @@ export const TimelineAlternateExample = ({
       </Timeline.Item>
       <Timeline.Item {...item}>
         <Timeline.Heading {...heading}>Test</Timeline.Heading>
-        <Timeline.Dot {...dot} />
+        <Timeline.Dot border="info" {...dot} />
         <Timeline.Line {...line} />
         <Timeline.Content>
           Thorough testing is essential to ensure the quality and reliability of your software.
@@ -117,7 +117,7 @@ export const TimelineAlternateExample = ({
         <Timeline.Heading side="left" {...heading}>
           Deploy
         </Timeline.Heading>
-        <Timeline.Dot {...dot} />
+        <Timeline.Dot border="primary" {...dot} />
         <Timeline.Line {...line} />
         <Timeline.Content side="left" {...content}>
           Once your software has passed rigorous testing, it&apos;s time to deploy it. Consider the
@@ -126,7 +126,7 @@ export const TimelineAlternateExample = ({
         </Timeline.Content>
       </Timeline.Item>
       <Timeline.Item {...item}>
-        <Timeline.Dot {...dot} />
+        <Timeline.Dot border="error" {...dot} />
         <Timeline.Heading {...heading}>Done!</Timeline.Heading>
       </Timeline.Item>
     </Timeline>
@@ -145,7 +145,7 @@ export const TimelineLeftExample = ({
     <Timeline {...timeline}>
       <Timeline.Item variant="primary" {...item}>
         <Timeline.Heading>Plan!</Timeline.Heading>
-        <Timeline.Dot status="success" {...dot} />
+        <Timeline.Dot border="info" status="success" {...dot} />
         <Timeline.Line variant="neutral" {...line} />
         <Timeline.Content {...content}>
           Before diving into coding, it is crucial to plan your software project thoroughly. This
@@ -158,7 +158,7 @@ export const TimelineLeftExample = ({
         <Timeline.Heading side="right" className="text-destructive" {...heading}>
           Design
         </Timeline.Heading>
-        <Timeline.Dot status="failed" {...dot} />
+        <Timeline.Dot border="info" fill status="failed" {...dot} />
         <Timeline.Line variant="neutral" {...line} />
         <Timeline.Content {...content}>
           Designing your software involves creating a blueprint that outlines the structure, user
@@ -167,9 +167,9 @@ export const TimelineLeftExample = ({
           design.
         </Timeline.Content>
       </Timeline.Item>
-      <Timeline.Item variant="success" {...item}>
+      <Timeline.Item {...item}>
         <Timeline.Heading {...heading}>Code</Timeline.Heading>
-        <Timeline.Dot status="active" {...dot} />
+        <Timeline.Dot border="info" fill status="active" variant="success" {...dot} />
         <Timeline.Line {...line} />
         <Timeline.Content {...content}>
           The coding phase involves translating your design into actual code. Choose a programming

package/src/components/Timeline/Timeline.tsx

@@ -35,11 +35,11 @@ const TimelineItem = forwardRef<HTMLLIElement, TimelineItemProps>(
 TimelineItem.displayName = "TimelineItem";
 
 const TimelineDot = forwardRef<HTMLDivElement, TimelineDotProps>(
-  ({ className, fill = false, status, variant, icon, ...props }, ref) => (
+  ({ className, fill = false, border, status, variant, icon, ...props }, ref) => (
     <div
       role="status"
       className={cn(
-        getTimelineDotClasses({ fill, status: icon ? "custom" : status, variant }),
+        getTimelineDotClasses({ fill, border, status: icon ? "custom" : status, variant }),
         className
       )}
       ref={ref}

package/src/components/Timeline/constants.ts

@@ -37,96 +37,109 @@ export const getTimelineDotClasses = cva(
         default: "[&>*]:hidden",
         active: "[&>*:not(.lucide-circle)]:hidden",
         success: "[&>*:not(.lucide-check)]:hidden",
-        failed:
-          "border-destructive bg-destructive [&>*:not(.lucide-x)]:hidden [&>.lucide-x]:text-background",
+        failed: "[&>*:not(.lucide-x)]:hidden",
         custom: "[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block",
       },
+      border: {
+        info: "border-info",
+        error: "border-error",
+        success: "border-success",
+        warning: "border-warning",
+        primary: "border-primary",
+        secondary: "border-secondary",
+        accent: "border-accent",
+        neutral: "border-neutral",
+        content: "border-base-100",
+      },
       fill: {
         true: "",
-        false: "border-current",
       },
       variant: {
-        info: "[&>.lucide-check]:text-info [&>.lucide-circle]:text-info [&>.lucide-x]:text-info",
+        info: "[&>.lucide-check]:text-info [&>.lucide-circle]:text-info [&>.lucide-circle]:fill-info [&>.lucide-x]:text-info",
         error:
-          "[&>.lucide-check]:text-error [&>.lucide-circle]:text-error [&>.lucide-x]:text-error",
+          "[&>.lucide-check]:text-error [&>.lucide-circle]:text-error [&>.lucide-circle]:fill-error [&>.lucide-x]:text-error",
         success:
-          "[&>.lucide-check]:text-success [&>.lucide-circle]:text-success [&>.lucide-x]:text-success",
+          "[&>.lucide-check]:text-success [&>.lucide-circle]:text-success [&>.lucide-circle]:fill-success [&>.lucide-x]:text-success",
         warning:
-          "[&>.lucide-check]:text-warning [&>.lucide-circle]:text-warning [&>.lucide-x]:text-warning",
+          "[&>.lucide-check]:text-warning [&>.lucide-circle]:text-warning [&>.lucide-circle]:fill-warning [&>.lucide-x]:text-warning",
         primary:
-          "[&>.lucide-check]:text-primary [&>.lucide-circle]:text-primary [&>.lucide-x]:text-primary",
+          "[&>.lucide-check]:text-primary [&>.lucide-circle]:text-primary [&>.lucide-circle]:fill-primary [&>.lucide-x]:text-primary",
         secondary:
-          "[&>.lucide-check]:text-secondary [&>.lucide-circle]:text-secondary [&>.lucide-x]:text-secondary",
+          "[&>.lucide-check]:text-secondary [&>.lucide-circle]:text-secondary [&>.lucide-circle]:fill-secondary [&>.lucide-x]:text-secondary",
         accent:
-          "[&>.lucide-check]:text-accent [&>.lucide-circle]:text-accent [&>.lucide-x]:text-accent",
+          "[&>.lucide-check]:text-accent [&>.lucide-circle]:text-accent [&>.lucide-circle]:fill-accent [&>.lucide-x]:text-accent",
         neutral:
-          "[&>.lucide-check]:text-neutral [&>.lucide-circle]:text-neutral [&>.lucide-x]:text-neutral",
+          "[&>.lucide-check]:text-neutral [&>.lucide-circle]:text-neutral [&>.lucide-circle]:fill-neutral [&>.lucide-x]:text-neutral",
         content:
-          "[&>.lucide-check]:text-base-content [&>.lucide-circle]:text-base-content [&>.lucide-x]:text-base-content",
+          "[&>.lucide-check]:text-base-content [&>.lucide-circle]:text-base-content [&>.lucide-circle]:fill-base-content [&>.lucide-x]:text-base-content",
       },
     },
     defaultVariants: {
       status: "default",
     },
     compoundVariants: [
+      {
+        border: undefined,
+        className: "border-none",
+      },
       {
         variant: undefined,
         className:
-          "border-current [&>.lucide-check]:text-current [&>.lucide-circle]:fill-current [&>.lucide-circle]:text-current [&>.lucide-x]:fill-current [&>.lucide-x]:text-current",
+          "border-current [&>.lucide-check]:text-current [&>.lucide-circle]:fill-current [&>.lucide-x]:fill-current [&>.lucide-x]:text-current",
       },
       {
         fill: true,
         variant: "info",
         className:
-          "border-info bg-info [&>.lucide-check]:text-info-content [&>.lucide-circle]:text-info-content [&>.lucide-x]:text-info-content",
+          "border-info bg-info [&>.lucide-check]:text-info-content [&>.lucide-circle]:fill-info-content [&>.lucide-x]:text-info-content",
       },
       {
         fill: true,
         variant: "error",
         className:
-          "border-error bg-error [&>.lucide-check]:text-error-content [&>.lucide-circle]:text-error-content [&>.lucide-x]:text-error-content",
+          "border-error bg-error [&>.lucide-check]:text-error-content [&>.lucide-circle]:fill-error-content [&>.lucide-x]:text-error-content",
       },
       {
         fill: true,
         variant: "success",
         className:
-          "border-success bg-success [&>.lucide-check]:text-success-content [&>.lucide-circle]:text-success-content [&>.lucide-x]:text-success-content",
+          "border-success bg-success [&>.lucide-check]:text-success-content [&>.lucide-circle]:fill-success-content [&>.lucide-x]:text-success-content",
       },
       {
         fill: true,
         variant: "warning",
         className:
-          "border-warning bg-warning [&>.lucide-check]:text-warning-content [&>.lucide-circle]:text-warning-content [&>.lucide-x]:text-warning-content",
+          "border-warning bg-warning [&>.lucide-check]:text-warning-content [&>.lucide-circle]:fill-warning-content [&>.lucide-x]:text-warning-content",
       },
       {
         fill: true,
         variant: "primary",
         className:
-          "border-primary bg-primary [&>.lucide-check]:text-primary-content [&>.lucide-circle]:text-primary-content [&>.lucide-x]:text-primary-content",
+          "border-primary bg-primary [&>.lucide-check]:text-primary-content [&>.lucide-circle]:fill-primary-content [&>.lucide-x]:text-primary-content",
       },
       {
         fill: true,
         variant: "secondary",
         className:
-          "border-secondary bg-secondary [&>.lucide-check]:text-secondary-content [&>.lucide-circle]:text-secondary-content [&>.lucide-x]:text-secondary-content",
+          "border-secondary bg-secondary [&>.lucide-check]:text-secondary-content [&>.lucide-circle]:fill-secondary-content [&>.lucide-x]:text-secondary-content",
       },
       {
         fill: true,
         variant: "accent",
         className:
-          "border-accent bg-accent [&>.lucide-check]:text-accent-content [&>.lucide-circle]:text-accent-content [&>.lucide-x]:text-accent-content",
+          "border-accent bg-accent [&>.lucide-check]:text-accent-content [&>.lucide-circle]:fill-accent-content [&>.lucide-x]:text-accent-content",
       },
       {
         fill: true,
         variant: "neutral",
         className:
-          "border-neutral bg-neutral [&>.lucide-check]:text-neutral-content [&>.lucide-circle]:text-neutral-content [&>.lucide-x]:text-neutral-content",
+          "border-neutral bg-neutral [&>.lucide-check]:text-neutral-content [&>.lucide-circle]:fill-neutral-content [&>.lucide-x]:text-neutral-content",
       },
       {
         fill: true,
         variant: "content",
         className:
-          "border-base-100 bg-base-100 [&>.lucide-check]:text-base-content [&>.lucide-circle]:text-base-content [&>.lucide-x]:text-base-content",
+          "border-base-100 bg-base-100 [&>.lucide-check]:text-base-content [&>.lucide-circle]:fill-base-content [&>.lucide-x]:text-base-content",
       },
     ],
   }