@mbao01/common 0.0.7 → 0.0.8

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type VariantProps } from "../../libs";
 import { getLoadingClasses } from "./constants";
 export type LoadingProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof getLoadingClasses>;

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { PopoverProps } from "./types";
+declare const Popover: {
+    (props: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    Content: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Popover };

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

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

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type VariantProps } from "../../libs";
+import { getPopoverContentClasses } from "./constants";
+export type PopoverProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;
+export type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & VariantProps<typeof getPopoverContentClasses>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { type VariantProps } from "../../libs";
 import { getProgressClasses } from "./constants";

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 export type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type VariantProps } from "../../libs";
 import { getSkeletonClasses } from "./constants";
 export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getSkeletonClasses>;

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

@@ -1,2 +1,2 @@
-import { type TextProps } from "./types";
-export declare const Text: ({ as, size, variant, children, className, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+import type { As, TextProps } from "./types";
+export declare const Text: <T extends As>({ as, size, variant, children, className, ...props }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,9 @@
+/// <reference types="react" />
 import { type VariantProps } from "../../libs";
 import { getTextClasses } from "./constants";
-export type TextProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof getTextClasses> & {
-    as?: keyof Pick<JSX.IntrinsicElements, "h1" | "h2" | "h3" | "h4" | "h5" | "p">;
+export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span";
+type AllowedElements = Pick<JSX.IntrinsicElements, As>;
+export type TextProps<T extends As> = React.HTMLAttributes<HTMLElement & AllowedElements[T]> & VariantProps<typeof getTextClasses> & {
+    as?: As;
 };
+export {};

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type VariantProps } from "../../libs";
 import { getTooltipArrowClasses, getTooltipContentClasses } from "./constants";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";

package/dist/types/index.d.ts

@@ -10,7 +10,13 @@ export * from "./components/Progress";
 export * from "./components/Separator";
 export * from "./components/Text";
 /** data input */
+export * from "./components/Form";
+export * from "./components/Combobox";
 /** feedback */
 export * from "./components/Loading";
 export * from "./components/Skeleton";
 export * from "./components/Tooltip";
+/** composable */
+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.7",
+  "version": "0.0.8",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -61,27 +61,35 @@
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "cmdk": "^1.0.0",
     "daisyui": "^4.6.2",
+    "react-international-phone": "^4.2.6",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-interactions": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/addon-themes": "^7.6.14",
-    "@storybook/blocks": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-vite": "^7.6.14",
-    "@storybook/test": "^7.6.14",
+    "@storybook/addon-essentials": "^8.0.6",
+    "@storybook/addon-interactions": "^8.0.6",
+    "@storybook/addon-links": "^8.0.6",
+    "@storybook/addon-onboarding": "^8.0.6",
+    "@storybook/addon-themes": "^8.0.6",
+    "@storybook/blocks": "^8.0.6",
+    "@storybook/react": "^8.0.6",
+    "@storybook/react-vite": "^8.0.6",
+    "@storybook/test": "^8.0.6",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
@@ -98,14 +106,14 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "jsdom": "^23.2.0",
     "path": "^0.12.7",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
-    "storybook": "^7.6.14",
+    "storybook": "^8.0.6",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vite": "^5.1.1",
@@ -117,5 +125,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "5a26b3e951c2b2a1a6cf5cb597129bc25a336a2d"
+  "gitHead": "b7bb9c19b245e54a221c02998dc7ec6815cead56"
 }

package/src/components/Combobox/Combobox.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import type { ComboboxProps, Item } from "./types";
+import { cn } from "../../utilities";
+import { Command } from "../Command";
+import { Popover } from "../Popover";
+import { Button } from "../Button";
+
+export const Combobox = <T extends Item>({
+  label,
+  items,
+  classes,
+  emptyText,
+  placeholder,
+  getItemValue = (item: T) => item.value as string,
+  getItemLabel = (item: T) => item.label as string,
+}: ComboboxProps<T>) => {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState<string | number | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setItem] = React.useState<T | null>(null);
+
+  const currentItem = items?.find((item) => getItemValue(item) === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <Button
+          outline
+          role="combobox"
+          aria-expanded={open}
+          className={cn("justify-between", classes?.trigger)}
+        >
+          {value && currentItem ? getItemLabel(currentItem) : label}
+          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content className={cn("w-[200px] p-0", classes?.popoverContent)}>
+        <Command className={cn(classes?.content)}>
+          <Command.Input
+            placeholder={placeholder}
+            className={cn(classes?.input)}
+          />
+          <Command.Empty className={cn(classes?.empty)}>
+            {emptyText}
+          </Command.Empty>
+          <Command.List>
+            <Command.Group className={cn(classes?.group)}>
+              {items?.map((item) => (
+                <Command.Item
+                  key={getItemValue(item)}
+                  value={getItemValue(item)}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? null : currentValue);
+                    setItem(item);
+                    setOpen(false);
+                  }}
+                  className={cn(
+                    {
+                      "bg-base-300": value === getItemValue(item),
+                    },
+                    classes?.item
+                  )}
+                >
+                  <CheckIcon
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === getItemValue(item) ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {getItemLabel(item)}
+                </Command.Item>
+              ))}
+            </Command.Group>
+          </Command.List>
+        </Command>
+      </Popover.Content>
+    </Popover>
+  );
+};

package/src/components/Combobox/index.ts

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

package/src/components/Combobox/types.ts

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Item = Record<string, any>;
+
+export type ComboboxProps<T extends Item> = {
+  label: string;
+  items: T[];
+  placeholder?: string;
+  emptyText?: string;
+  getItemValue?: (item: T) => string;
+  getItemLabel?: (item: T) => string;
+  classes?: Partial<{
+    root: string;
+    trigger: string;
+    content: string;
+    input: string;
+    empty: string;
+    group: string;
+    item: string;
+    popoverContent: string;
+  }>;
+};

package/src/components/Command/Command.tsx

@@ -0,0 +1,142 @@
+"use client";
+/* eslint-disable react/prop-types */
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import type {
+  CommandProps,
+  CommandDialogProps,
+  CommandInputProps,
+} from "./types";
+import { Dialog } from "../Dialog";
+import { cn } from "../../utilities";
+import {
+  getDialogContentClasses,
+  getCommandClasses,
+  getCommandDialogClasses,
+  getCommandEmptyClasses,
+  getCommandInputClasses,
+  getCommandInputWrapperClasses,
+  getCommandListClasses,
+  getCommandGroupClasses,
+  getCommandSeparatorClasses,
+  getCommandItemClasses,
+  getCommandShortcutClasses,
+} from "./constants";
+
+const Command = ({ className, ...props }: CommandProps) => (
+  <CommandPrimitive className={cn(getCommandClasses(), className)} {...props} />
+);
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <Dialog.Content className={cn(getDialogContentClasses())}>
+        <Command className={cn(getCommandDialogClasses())}>{children}</Command>
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  CommandInputProps
+>(({ className, ...props }, ref) => (
+  // eslint-disable-next-line react/no-unknown-property
+  <div className={cn(getCommandInputWrapperClasses())} cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(getCommandInputClasses(), className)}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn(getCommandListClasses(), className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className={cn(getCommandEmptyClasses(), className)}
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(getCommandGroupClasses(), className)}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn(getCommandSeparatorClasses(), className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(getCommandItemClasses(), className)}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span className={cn(getCommandShortcutClasses(), className)} {...props} />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+Command.Dialog = CommandDialog;
+Command.Input = CommandInput;
+Command.List = CommandList;
+Command.Empty = CommandEmpty;
+Command.Group = CommandGroup;
+Command.Item = CommandItem;
+Command.Shortcut = CommandShortcut;
+Command.Separator = CommandSeparator;
+
+export { Command };

package/src/components/Command/constants.ts

@@ -0,0 +1,39 @@
+import { cva } from "../../libs";
+
+export const getCommandClasses = cva(
+  "flex h-full w-full flex-col overflow-hidden rounded-md text-base-content"
+);
+
+export const getDialogContentClasses = cva("overflow-hidden p-0 shadow-lg");
+
+export const getCommandDialogClasses = cva(
+  "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+);
+
+export const getCommandInputWrapperClasses = cva(
+  "flex items-center border-b px-3"
+);
+
+export const getCommandInputClasses = cva(
+  "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+);
+
+export const getCommandListClasses = cva(
+  "max-h-[300px] overflow-y-auto overflow-x-hidden"
+);
+
+export const getCommandEmptyClasses = cva("py-6 text-center text-sm");
+
+export const getCommandGroupClasses = cva(
+  "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground"
+);
+
+export const getCommandSeparatorClasses = cva("-mx-1 h-px bg-border");
+
+export const getCommandItemClasses = cva(
+  "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors aria-selected:bg-base-300 aria-selected:text-base-content aria-disabled:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default"
+);
+
+export const getCommandShortcutClasses = cva(
+  "ml-auto text-xs tracking-widest text-muted-foreground"
+);

package/src/components/Command/index.ts

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

package/src/components/Command/types.ts

@@ -0,0 +1,16 @@
+import { Command as CommandPrimitive } from "cmdk";
+import { type DialogProps } from "../Dialog/types";
+import { type VariantProps } from "../../libs";
+import { getCommandClasses, getCommandInputClasses } from "./constants";
+
+export type CommandProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive
+> &
+  VariantProps<typeof getCommandClasses>;
+
+export type CommandInputProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Input
+> &
+  VariantProps<typeof getCommandInputClasses>;
+
+export type CommandDialogProps = DialogProps;

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import type {
+  DialogProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogOverlayProps,
+  DialogContentProps,
+} from "./types";
+import { cn } from "../../utilities";
+import {
+  getDialogCloseClasses,
+  getDialogContentClasses,
+  getDialogDescriptionClasses,
+  getDialogFooterClasses,
+  getDialogHeaderClasses,
+  getDialogOverlayClasses,
+  getDialogTitleClasses,
+} from "./constants";
+
+const Dialog = (props: DialogProps) => <DialogPrimitive.Root {...props} />;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  DialogOverlayProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(getDialogOverlayClasses(), className)}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, ...props }, ref) => (
+  <DialogPrimitive.Portal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(getDialogContentClasses(), className)}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className={cn(getDialogCloseClasses())}>
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: DialogHeaderProps) => (
+  <div className={cn(getDialogHeaderClasses(), className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: DialogFooterProps) => (
+  <div className={cn(getDialogFooterClasses(), className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  DialogTitleProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(getDialogTitleClasses(), className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  DialogDescriptionProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn(getDialogDescriptionClasses(), className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+Dialog.Trigger = DialogPrimitive.Trigger;
+Dialog.Portal = DialogPrimitive.Portal;
+Dialog.Close = DialogPrimitive.Close;
+Dialog.Header = DialogHeader;
+Dialog.Title = DialogTitle;
+Dialog.Description = DialogDescription;
+Dialog.Content = DialogContent;
+Dialog.Footer = DialogFooter;
+Dialog.Overlay = DialogOverlay;
+
+export { Dialog };

package/src/components/Dialog/constants.ts

@@ -0,0 +1,27 @@
+import { cva } from "../../libs";
+
+export const getDialogOverlayClasses = cva(
+  "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+);
+
+export const getDialogContentClasses = cva(
+  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-base-100 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
+);
+
+export const getDialogHeaderClasses = cva(
+  "flex flex-col space-y-1.5 text-center sm:text-left"
+);
+
+export const getDialogFooterClasses = cva(
+  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+);
+
+export const getDialogTitleClasses = cva(
+  "text-lg font-semibold leading-none tracking-tight"
+);
+
+export const getDialogDescriptionClasses = cva("text-sm text-muted-foreground");
+
+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/Dialog/index.ts

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

package/src/components/Dialog/types.ts

@@ -0,0 +1,40 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "../../libs";
+import {
+  getDialogContentClasses,
+  getDialogDescriptionClasses,
+  getDialogFooterClasses,
+  getDialogHeaderClasses,
+  getDialogOverlayClasses,
+  getDialogTitleClasses,
+} from "./constants";
+
+export type DialogProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Root
+>;
+
+export type DialogOverlayProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Overlay
+> &
+  VariantProps<typeof getDialogOverlayClasses>;
+
+export type DialogContentProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> &
+  VariantProps<typeof getDialogContentClasses>;
+
+export type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getDialogHeaderClasses>;
+
+export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getDialogFooterClasses>;
+
+export type DialogTitleProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Title
+> &
+  VariantProps<typeof getDialogTitleClasses>;
+
+export type DialogDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Description
+> &
+  VariantProps<typeof getDialogDescriptionClasses>;