@mbao01/common 0.0.12 → 0.0.14

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

@@ -0,0 +1,7 @@
+import type { AlertDescriptionProps, AlertTitleProps, AlertProps } from "./types";
+declare const Alert: {
+    ({ variant, outline, className, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+    Title: ({ className, ...props }: AlertTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ className, ...props }: AlertDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Alert };

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

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

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type VariantProps } from "../../libs";
+import { getAlertClasses } from "./constants";
+export type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getAlertClasses>;
+export type AlertTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+export type AlertDescriptionProps = React.HTMLAttributes<HTMLDivElement>;

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type { AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogProps } from "./types";
+declare const AlertDialog: {
+    (props: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+    Portal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+    Overlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & {} & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {} & React.RefAttributes<HTMLDivElement>>;
+    Header: {
+        ({ className, ...props }: AlertDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ...props }: AlertDialogFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {} & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & {} & React.RefAttributes<HTMLParagraphElement>>;
+    Action: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+        variant?: "accent" | "default" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+        outline?: boolean | undefined;
+        wide?: boolean | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+        isLoading?: boolean | undefined;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    Cancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+        variant?: "accent" | "default" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+        outline?: boolean | undefined;
+        wide?: boolean | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+        isLoading?: boolean | undefined;
+    } & React.RefAttributes<HTMLButtonElement>>;
+};
+export { AlertDialog };

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

@@ -0,0 +1 @@
+export declare const getDialogCloseClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { type VariantProps } from "../../libs";
+import { getDialogContentClasses, getDialogDescriptionClasses, getDialogFooterClasses, getDialogHeaderClasses, getDialogOverlayClasses, getDialogTitleClasses } from "../Dialog/constants";
+import { getButtonClasses } from "../Button/constants";
+export type AlertDialogProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>;
+export type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & VariantProps<typeof getDialogOverlayClasses>;
+export type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & VariantProps<typeof getDialogContentClasses>;
+export type AlertDialogHeaderProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getDialogHeaderClasses>;
+export type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getDialogFooterClasses>;
+export type AlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & VariantProps<typeof getDialogTitleClasses>;
+export type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & VariantProps<typeof getDialogDescriptionClasses>;
+export type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & VariantProps<typeof getButtonClasses>;
+export type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & VariantProps<typeof getButtonClasses>;

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

@@ -4,6 +4,7 @@ export { Radio } from "./Radio";
 export { Range } from "./Range";
 export { Select } from "./Select";
 export { Slider } from "./Slider";
+export { Switch } from "./Switch";
 export { Checkbox } from "./Checkbox";
 export { Textarea } from "./Textarea";
 export { TextField } from "./TextField";

package/dist/types/components/Sonner/Toaster.d.ts

@@ -0,0 +1,2 @@
+import { type ToasterProps } from "./types";
+export declare const Toaster: ({ theme, variant, outline, className, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,2 @@
+export { toast } from "sonner";
+export { Toaster } from "./Toaster";

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Toaster } from "sonner";
+import { type VariantProps } from "../../libs";
+import { getToastClasses } from "./constants";
+export type ToasterProps = React.ComponentProps<typeof Toaster> & VariantProps<typeof getToastClasses>;

package/dist/types/index.d.ts

@@ -2,21 +2,26 @@
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
 /** data display */
+export * from "./components/Alert";
 export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Card";
+export * from "./components/Calendar";
 export * from "./components/Description";
 export * from "./components/Progress";
 export * from "./components/Separator";
+export * from "./components/Sonner";
 export * from "./components/Text";
 /** data input */
 export * from "./components/Form";
 export * from "./components/Combobox";
+export * from "./components/DatePicker";
 /** feedback */
 export * from "./components/Loading";
 export * from "./components/Skeleton";
 export * from "./components/Tooltip";
 /** composable */
+export * from "./components/AlertDialog";
 export * from "./components/Dialog";
 export * from "./components/Command";
 export * from "./components/Popover";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -60,6 +60,7 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -79,6 +80,7 @@
     "date-fns": "^3.6.0",
     "react-day-picker": "^8.10.0",
     "react-international-phone": "^4.2.6",
+    "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },
@@ -127,5 +129,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "529b4ea031970fd4696249033017ce46100c1d47"
+  "gitHead": "57a912d17db57876656b318632bcb235bef0459d"
 }

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,31 @@
+import type {
+  AlertDescriptionProps,
+  AlertTitleProps,
+  AlertProps,
+} from "./types";
+import { cn } from "../../utilities";
+import { getAlertClasses } from "./constants";
+
+const Alert = ({ variant, outline, className, ...props }: AlertProps) => (
+  <div
+    role="alert"
+    className={cn(getAlertClasses({ variant, outline }), className)}
+    {...props}
+  />
+);
+
+const AlertTitle = ({ className, ...props }: AlertTitleProps) => (
+  <h5
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+);
+
+const AlertDescription = ({ className, ...props }: AlertDescriptionProps) => (
+  <div className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+);
+
+Alert.Title = AlertTitle;
+Alert.Description = AlertDescription;
+
+export { Alert };

package/src/components/Alert/constants.ts

@@ -0,0 +1,39 @@
+import { cva } from "../../libs";
+
+export const getAlertClasses = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-inherit",
+  {
+    variants: {
+      variant: {
+        accent: "bg-accent text-accent-content border-accent",
+        default: "bg-default text-default-content border-default",
+        error: "bg-error text-error-content border-error",
+        ghost: "bg-ghost text-ghost-content border-transparent",
+        info: "bg-info text-info-content border-info",
+        neutral: "bg-neutral text-neutral-content border-neutral",
+        primary: "bg-primary text-primary-content border-primary",
+        secondary: "bg-secondary text-secondary-content border-secondary",
+        success: "bg-success text-success-content border-success",
+        warning: "bg-warning text-warning-content border-warning",
+      },
+      outline: {
+        true: "border bg-default",
+      },
+    },
+    compoundVariants: [
+      { outline: true, variant: "accent", className: "text-accent" },
+      { outline: true, variant: "default", className: "text-default" },
+      { outline: true, variant: "error", className: "text-error" },
+      { outline: true, variant: "ghost", className: "text-ghost" },
+      { outline: true, variant: "info", className: "text-info" },
+      { outline: true, variant: "neutral", className: "text-neutral" },
+      { outline: true, variant: "primary", className: "text-primary" },
+      { outline: true, variant: "secondary", className: "text-secondary" },
+      { outline: true, variant: "success", className: "text-success" },
+      { outline: true, variant: "warning", className: "text-warning" },
+    ],
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);

package/src/components/Alert/index.ts

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

package/src/components/Alert/types.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from "../../libs";
+import { getAlertClasses } from "./constants";
+
+export type AlertProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getAlertClasses>;
+
+export type AlertTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+
+export type AlertDescriptionProps = React.HTMLAttributes<HTMLDivElement>;

package/src/components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type {
+  AlertDialogActionProps,
+  AlertDialogCancelProps,
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogOverlayProps,
+  AlertDialogProps,
+  AlertDialogTitleProps,
+} from "./types";
+import { cn } from "../../utilities";
+import {
+  getDialogContentClasses,
+  getDialogDescriptionClasses,
+  getDialogFooterClasses,
+  getDialogHeaderClasses,
+  getDialogOverlayClasses,
+  getDialogTitleClasses,
+} from "../Dialog/constants";
+import { Button } from "../Button";
+
+const AlertDialog = (props: AlertDialogProps) => (
+  <AlertDialogPrimitive.Root {...props} />
+);
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  AlertDialogOverlayProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(getDialogOverlayClasses(), className)}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  AlertDialogContentProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(getDialogContentClasses(), className)}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: AlertDialogHeaderProps) => (
+  <div className={cn(getDialogHeaderClasses(), className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: AlertDialogFooterProps) => (
+  <div className={cn(getDialogFooterClasses(), className)} {...props} />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  AlertDialogTitleProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn(getDialogTitleClasses(), className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  AlertDialogDescriptionProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn(getDialogDescriptionClasses(), className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  AlertDialogActionProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} asChild>
+    <Button className={cn(className)} {...props} />
+  </AlertDialogPrimitive.Action>
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  AlertDialogCancelProps
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel ref={ref} asChild>
+    <Button className={cn("mt-2 sm:mt-0", className)} {...props} />
+  </AlertDialogPrimitive.Cancel>
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+AlertDialog.Portal = AlertDialogPortal;
+AlertDialog.Overlay = AlertDialogOverlay;
+AlertDialog.Trigger = AlertDialogTrigger;
+AlertDialog.Content = AlertDialogContent;
+AlertDialog.Header = AlertDialogHeader;
+AlertDialog.Footer = AlertDialogFooter;
+AlertDialog.Title = AlertDialogTitle;
+AlertDialog.Description = AlertDialogDescription;
+AlertDialog.Action = AlertDialogAction;
+AlertDialog.Cancel = AlertDialogCancel;
+
+export { AlertDialog };

package/src/components/AlertDialog/constants.ts

@@ -0,0 +1,5 @@
+import { cva } from "../../libs";
+
+export const getDialogCloseClasses = cva(
+  "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+);

package/src/components/AlertDialog/index.ts

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

package/src/components/AlertDialog/types.ts

@@ -0,0 +1,51 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { type VariantProps } from "../../libs";
+import {
+  getDialogContentClasses,
+  getDialogDescriptionClasses,
+  getDialogFooterClasses,
+  getDialogHeaderClasses,
+  getDialogOverlayClasses,
+  getDialogTitleClasses,
+} from "../Dialog/constants";
+import { getButtonClasses } from "../Button/constants";
+
+export type AlertDialogProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Root
+>;
+
+export type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Overlay
+> &
+  VariantProps<typeof getDialogOverlayClasses>;
+
+export type AlertDialogContentProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Content
+> &
+  VariantProps<typeof getDialogContentClasses>;
+
+export type AlertDialogHeaderProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getDialogHeaderClasses>;
+
+export type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getDialogFooterClasses>;
+
+export type AlertDialogTitleProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Title
+> &
+  VariantProps<typeof getDialogTitleClasses>;
+
+export type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Description
+> &
+  VariantProps<typeof getDialogDescriptionClasses>;
+
+export type AlertDialogActionProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Cancel
+> &
+  VariantProps<typeof getButtonClasses>; 
+
+export type AlertDialogCancelProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Cancel
+> &
+  VariantProps<typeof getButtonClasses>;

package/src/components/Form/index.ts

@@ -4,6 +4,7 @@ export { Radio } from "./Radio";
 export { Range } from "./Range";
 export { Select } from "./Select";
 export { Slider } from "./Slider";
+export { Switch } from "./Switch";
 export { Checkbox } from "./Checkbox";
 export { Textarea } from "./Textarea";
 export { TextField } from "./TextField";

package/src/components/Sonner/Toaster.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Toaster as Sonner } from "sonner";
+import { type ToasterProps } from "./types";
+import { cn } from "../../utilities";
+import { getToastClasses } from "./constants";
+
+export const Toaster = ({
+  theme,
+  variant,
+  outline,
+  className,
+  ...props
+}: ToasterProps) => {
+  return (
+    <Sonner
+      theme={theme}
+      className={cn("toaster group", className)}
+      toastOptions={{
+        classNames: {
+          toast: cn(
+            "group sonn group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+            getToastClasses({ variant, outline })
+          ),
+          description: "group-[.sonn]:text-muted-foreground",
+          actionButton:
+            "group-[.sonn]:bg-primary group-[.sonn]:text-primary-foreground",
+          cancelButton:
+            "group-[.sonn]:bg-muted group-[.sonn]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};

package/src/components/Sonner/constants.ts

@@ -0,0 +1,39 @@
+import { cva } from "../../libs";
+
+export const getToastClasses = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-inherit",
+  {
+    variants: {
+      variant: {
+        accent: "bg-accent text-accent-content border-accent",
+        default: "bg-default text-default-content border-default",
+        error: "bg-error text-error-content border-error",
+        ghost: "bg-ghost text-ghost-content border-transparent",
+        info: "bg-info text-info-content border-info",
+        neutral: "bg-neutral text-neutral-content border-neutral",
+        primary: "bg-primary text-primary-content border-primary",
+        secondary: "bg-secondary text-secondary-content border-secondary",
+        success: "bg-success text-success-content border-success",
+        warning: "bg-warning text-warning-content border-warning",
+      },
+      outline: {
+        true: "border bg-default",
+      },
+    },
+    compoundVariants: [
+      { outline: true, variant: "accent", className: "text-accent" },
+      { outline: true, variant: "default", className: "text-default" },
+      { outline: true, variant: "error", className: "text-error" },
+      { outline: true, variant: "ghost", className: "text-ghost" },
+      { outline: true, variant: "info", className: "text-info" },
+      { outline: true, variant: "neutral", className: "text-neutral" },
+      { outline: true, variant: "primary", className: "text-primary" },
+      { outline: true, variant: "secondary", className: "text-secondary" },
+      { outline: true, variant: "success", className: "text-success" },
+      { outline: true, variant: "warning", className: "text-warning" },
+    ],
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);

package/src/components/Sonner/index.ts

@@ -0,0 +1,2 @@
+export { toast } from "sonner";
+export { Toaster } from "./Toaster";

package/src/components/Sonner/types.ts

@@ -0,0 +1,6 @@
+import { Toaster } from "sonner";
+import { type VariantProps } from "../../libs";
+import { getToastClasses } from "./constants";
+
+export type ToasterProps = React.ComponentProps<typeof Toaster> &
+  VariantProps<typeof getToastClasses>;

package/src/index.ts

@@ -3,17 +3,21 @@ export * from "./components/Button";
 export * from "./components/Breadcrumbs";
 
 /** data display */
+export * from "./components/Alert";
 export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Card";
+export * from "./components/Calendar";
 export * from "./components/Description";
 export * from "./components/Progress";
 export * from "./components/Separator";
+export * from "./components/Sonner";
 export * from "./components/Text";
 
 /** data input */
 export * from "./components/Form";
 export * from "./components/Combobox";
+export * from "./components/DatePicker";
 
 /** feedback */
 export * from "./components/Loading";
@@ -21,6 +25,7 @@ export * from "./components/Skeleton";
 export * from "./components/Tooltip";
 
 /** composable */
+export * from "./components/AlertDialog";
 export * from "./components/Dialog";
 export * from "./components/Command";
 export * from "./components/Popover";