@mbao01/common 0.0.41 → 0.0.43

package/src/components/ScrollArea/constants.ts

@@ -2,17 +2,14 @@ import { cva } from "../../libs";
 
 export const getScrollAreaClasses = cva("relative overflow-hidden");
 
-export const getScrollAreaScrollbarClasses = cva(
-  "flex touch-none select-none transition-colors",
-  {
-    variants: {
-      orientation: {
-        horizontal: "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-        vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      },
+export const getScrollAreaScrollbarClasses = cva("flex touch-none select-none transition-colors", {
+  variants: {
+    orientation: {
+      horizontal: "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",
     },
-  }
-);
+  },
+});
 
 export const getScrollAreaThumbClasses = cva("relative flex-1 rounded-full", {
   variants: {
@@ -31,6 +28,4 @@ export const getScrollAreaThumbClasses = cva("relative flex-1 rounded-full", {
   },
 });
 
-export const getScrollAreaViewportClasses = cva(
-  "h-full w-full rounded-[inherit]"
-);
+export const getScrollAreaViewportClasses = cva("h-full w-full rounded-[inherit]");

package/src/components/ScrollArea/types.ts

@@ -2,9 +2,7 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { VariantProps } from "../../libs";
 import { getScrollAreaThumbClasses } from "./constants";
 
-export type ScrollAreaProps = React.ComponentPropsWithoutRef<
-  typeof ScrollAreaPrimitive.Root
-> & {
+export type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
   scrollbar?: ScrollbarProps;
 };
 

package/src/components/Separator/Separator.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { type SeparatorProps } from "./types";
-import { getSeparatorClasses } from "./constants";
 import { cn } from "../../utilities";
+import { getSeparatorClasses } from "./constants";
+import { type SeparatorProps } from "./types";
 
 export const Separator = ({
   className,

package/src/components/Separator/types.ts

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

package/src/components/Skeleton/Skeleton.tsx

@@ -1,21 +1,11 @@
-import { type SkeletonProps } from "./types";
-import { getSkeletonClasses } from "./constants";
 import { cn } from "../../utilities";
+import { getSkeletonClasses } from "./constants";
+import { type SkeletonProps } from "./types";
 
-export const Skeleton = ({
-  round,
-  width,
-  height,
-  variant,
-  className,
-  ...props
-}: SkeletonProps) => {
+export const Skeleton = ({ round, width, height, variant, className, ...props }: SkeletonProps) => {
   return (
     <div
-      className={cn(
-        getSkeletonClasses({ width, height, round, variant }),
-        className
-      )}
+      className={cn(getSkeletonClasses({ width, height, round, variant }), className)}
       {...props}
     />
   );

package/src/components/Sonner/Toaster.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { Toaster as Sonner } from "sonner";
-import { type ToasterProps } from "./types";
 import { cn } from "../../utilities";
 import { getToastButtonClasses, getToastClasses } from "./constants";
+import { type ToasterProps } from "./types";
 
 export const Toaster = ({
   theme,
@@ -30,9 +30,7 @@ export const Toaster = ({
               ...cancelButton,
             })
           ),
-          closeButton: cn(
-            getToastButtonClasses({ variant: "neutral", ...closeButton })
-          ),
+          closeButton: cn(getToastButtonClasses({ variant: "neutral", ...closeButton })),
         },
       }}
       {...props}

package/src/components/Sonner/constants.ts

@@ -42,16 +42,11 @@ export const getToastButtonClasses = cva("", {
       accent: "group-[.sonner]:!bg-accent group-[.sonner]:!text-accent-content",
       error: "group-[.sonner]:!bg-error group-[.sonner]:!text-error-content",
       info: "group-[.sonner]:!bg-info group-[.sonner]:!text-info-content",
-      neutral:
-        "group-[.sonner]:!bg-neutral group-[.sonner]:!text-neutral-content",
-      primary:
-        "group-[.sonner]:!bg-primary group-[.sonner]:!text-primary-content",
-      secondary:
-        "group-[.sonner]:!bg-secondary group-[.sonner]:!text-secondary-content",
-      success:
-        "group-[.sonner]:!bg-success group-[.sonner]:!text-success-content",
-      warning:
-        "group-[.sonner]:!bg-warning group-[.sonner]:!text-warning-content",
+      neutral: "group-[.sonner]:!bg-neutral group-[.sonner]:!text-neutral-content",
+      primary: "group-[.sonner]:!bg-primary group-[.sonner]:!text-primary-content",
+      secondary: "group-[.sonner]:!bg-secondary group-[.sonner]:!text-secondary-content",
+      success: "group-[.sonner]:!bg-success group-[.sonner]:!text-success-content",
+      warning: "group-[.sonner]:!bg-warning group-[.sonner]:!text-warning-content",
     },
     outline: {
       true: "group-[.sonner]:!border group-[.sonner]:!border-solid group-[.sonner]:!bg-transparent",
@@ -76,32 +71,27 @@ export const getToastButtonClasses = cva("", {
     {
       outline: true,
       variant: "neutral",
-      className:
-        "group-[.sonner]:!border-neutral group-[.sonner]:!text-neutral",
+      className: "group-[.sonner]:!border-neutral group-[.sonner]:!text-neutral",
     },
     {
       outline: true,
       variant: "primary",
-      className:
-        "group-[.sonner]:!border-primary group-[.sonner]:!text-primary",
+      className: "group-[.sonner]:!border-primary group-[.sonner]:!text-primary",
     },
     {
       outline: true,
       variant: "secondary",
-      className:
-        "group-[.sonner]:!border-secondary group-[.sonner]:!text-secondary",
+      className: "group-[.sonner]:!border-secondary group-[.sonner]:!text-secondary",
     },
     {
       outline: true,
       variant: "success",
-      className:
-        "group-[.sonner]:!border-success group-[.sonner]:!text-success",
+      className: "group-[.sonner]:!border-success group-[.sonner]:!text-success",
     },
     {
       outline: true,
       variant: "warning",
-      className:
-        "group-[.sonner]:!border-warning group-[.sonner]:!text-warning",
+      className: "group-[.sonner]:!border-warning group-[.sonner]:!text-warning",
     },
   ],
 });

package/src/components/Sonner/types.ts

@@ -4,14 +4,8 @@ import { getToastButtonClasses, getToastClasses } from "./constants";
 
 type ToastButtonVariantProps = VariantProps<typeof getToastButtonClasses>;
 
-export type ToasterProps = Omit<
-  React.ComponentProps<typeof Toaster>,
-  "closeButton"
-> &
+export type ToasterProps = Omit<React.ComponentProps<typeof Toaster>, "closeButton"> &
   VariantProps<typeof getToastClasses> &
-  Partial<
-    Record<
-      "actionButton" | "cancelButton" | "closeButton",
-      ToastButtonVariantProps
-    >
-  > & { showCloseButton?: boolean };
+  Partial<Record<"actionButton" | "cancelButton" | "closeButton", ToastButtonVariantProps>> & {
+    showCloseButton?: boolean;
+  };

package/src/components/Table/Table.tsx

@@ -1,32 +1,21 @@
 import { forwardRef } from "react";
-import { cn } from "../../utilities";
 import type {
   TableBodyProps,
   TableCaptionProps,
   TableCellProps,
   TableFooterProps,
-  TableHeadProps,
   TableHeaderProps,
+  TableHeadProps,
   TableProps,
   TableRowProps,
 } from "./types";
+import { cn } from "../../utilities";
 import { getTableClasses, getTableHeaderClasses } from "./constants";
 
-const Table = ({
-  className,
-  caption,
-  zebra,
-  size,
-  pinRow,
-  pinColumn,
-  ...props
-}: TableProps) => (
+const Table = ({ className, caption, zebra, size, pinRow, pinColumn, ...props }: TableProps) => (
   <div className="relative w-full overflow-auto">
     <table
-      className={cn(
-        getTableClasses({ caption, zebra, size, pinRow, pinColumn }),
-        className
-      )}
+      className={cn(getTableClasses({ caption, zebra, size, pinRow, pinColumn }), className)}
       {...props}
     />
   </div>
@@ -35,43 +24,39 @@ Table.displayName = "Table";
 
 const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(
   ({ className, ...props }, ref) => (
-    <thead
-      ref={ref}
-      className={cn(getTableHeaderClasses(), className)}
-      {...props}
-    />
+    <thead ref={ref} className={cn(getTableHeaderClasses(), className)} {...props} />
   )
 );
 TableHeader.displayName = "TableHeader";
 
-const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
-  (props, ref) => <tbody ref={ref} {...props} />
-);
+const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>((props, ref) => (
+  <tbody ref={ref} {...props} />
+));
 TableBody.displayName = "TableBody";
 
-const TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(
-  (props, ref) => <tfoot ref={ref} {...props} />
-);
+const TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>((props, ref) => (
+  <tfoot ref={ref} {...props} />
+));
 TableFooter.displayName = "TableFooter";
 
-const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
-  (props, ref) => <tr ref={ref} {...props} />
-);
+const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>((props, ref) => (
+  <tr ref={ref} {...props} />
+));
 TableRow.displayName = "TableRow";
 
-const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(
-  (props, ref) => <th ref={ref} {...props} />
-);
+const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>((props, ref) => (
+  <th ref={ref} {...props} />
+));
 TableHead.displayName = "TableHead";
 
-const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
-  (props, ref) => <td ref={ref} {...props} />
-);
+const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>((props, ref) => (
+  <td ref={ref} {...props} />
+));
 TableCell.displayName = "TableCell";
 
-const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(
-  (props, ref) => <caption ref={ref} {...props} />
-);
+const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>((props, ref) => (
+  <caption ref={ref} {...props} />
+));
 TableCaption.displayName = "TableCaption";
 
 Table.Header = TableHeader;

package/src/components/Tabs/Tabs.tsx

@@ -2,42 +2,24 @@
 
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from "./types";
 import { cn } from "../../utilities";
-import {
-  getTabsContentClasses,
-  getTabsListClasses,
-  getTabsTriggerClasses,
-} from "./constants";
-import type {
-  TabsContentProps,
-  TabsListProps,
-  TabsProps,
-  TabsTriggerProps,
-} from "./types";
+import { getTabsContentClasses, getTabsListClasses, getTabsTriggerClasses } from "./constants";
 
 const Tabs = (props: TabsProps) => <TabsPrimitive.Root {...props} />;
 
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  TabsListProps
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(getTabsListClasses(), className)}
-    {...props}
-  />
-));
+const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(
+  ({ className, ...props }, ref) => (
+    <TabsPrimitive.List ref={ref} className={cn(getTabsListClasses(), className)} {...props} />
+  )
+);
 TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   TabsTriggerProps
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(getTabsTriggerClasses(), className)}
-    {...props}
-  />
+  <TabsPrimitive.Trigger ref={ref} className={cn(getTabsTriggerClasses(), className)} {...props} />
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
@@ -45,11 +27,7 @@ const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   TabsContentProps
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(getTabsContentClasses(), className)}
-    {...props}
-  />
+  <TabsPrimitive.Content ref={ref} className={cn(getTabsContentClasses(), className)} {...props} />
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 

package/src/components/Tabs/types.ts

@@ -1,26 +1,14 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { type VariantProps } from "../../libs";
-import {
-  getTabsContentClasses,
-  getTabsListClasses,
-  getTabsTriggerClasses,
-} from "./constants";
+import { getTabsContentClasses, getTabsListClasses, getTabsTriggerClasses } from "./constants";
 
-export type TabsProps = React.ComponentPropsWithoutRef<
-  typeof TabsPrimitive.Root
->;
+export type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;
 
-export type TabsListProps = React.ComponentPropsWithoutRef<
-  typeof TabsPrimitive.List
-> &
+export type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> &
   VariantProps<typeof getTabsListClasses>;
 
-export type TabsTriggerProps = React.ComponentPropsWithoutRef<
-  typeof TabsPrimitive.Trigger
-> &
+export type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> &
   VariantProps<typeof getTabsTriggerClasses>;
 
-export type TabsContentProps = React.ComponentPropsWithoutRef<
-  typeof TabsPrimitive.Content
-> &
+export type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> &
   VariantProps<typeof getTabsContentClasses>;

package/src/components/Text/Text.tsx

@@ -1,8 +1,8 @@
 import React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import type { As, TextProps } from "./types";
-import { getTextClasses } from "./constants";
 import { cn } from "../../utilities";
-import { Slot } from "@radix-ui/react-slot";
+import { getTextClasses } from "./constants";
 
 export const Text = <T extends As>({
   as,
@@ -16,10 +16,7 @@ export const Text = <T extends As>({
   const SlotChild = as ? as : React.Fragment;
 
   return (
-    <Comp
-      className={cn(getTextClasses({ size, variant }), className)}
-      {...props}
-    >
+    <Comp className={cn(getTextClasses({ size, variant }), className)} {...props}>
       {/* slot merges it's prop into it's immediate child */}
       <SlotChild>{children}</SlotChild>
     </Comp>

package/src/components/Text/index.ts

@@ -1 +1 @@
-export { Text } from './Text';
+export { Text } from "./Text";

package/src/components/Text/types.ts

@@ -5,9 +5,7 @@ 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]
-> &
+export type TextProps<T extends As> = React.HTMLAttributes<HTMLElement & AllowedElements[T]> &
   VariantProps<typeof getTextClasses> & {
     as?: As;
   };

package/src/components/ThemeSwitch/ThemeSwitch.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { type ChangeEvent, useLayoutEffect, useState } from "react";
-import { type ThemeSwitchProps } from "./types";
+import type { ChangeEvent } from "react";
+import { useLayoutEffect, useState } from "react";
 import { cn, getTheme, saveTheme } from "../../utilities";
 import { getThemeSwitchClasses } from "./constants";
+import { type ThemeSwitchProps } from "./types";
 
 const MoonIcon = ({ title }: { title: string }) => (
   <svg

package/src/components/Toggle/Toggle.tsx

@@ -2,25 +2,24 @@
 
 import * as React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { type ToggleProps } from "./types";
 import { cn } from "../../utilities";
-import { getToggleClasses } from "./constants";
 import { getButtonClasses } from "../Button/constants";
+import { getToggleClasses } from "./constants";
+import { type ToggleProps } from "./types";
 
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  ToggleProps
->(({ className, variant = "default", size, wide, outline, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(
-      getButtonClasses({ size, wide, outline }),
-      getToggleClasses({ variant }),
-      className
-    )}
-    {...props}
-  />
-));
+const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(
+  ({ className, variant = "default", size, wide, outline, ...props }, ref) => (
+    <TogglePrimitive.Root
+      ref={ref}
+      className={cn(
+        getButtonClasses({ size, wide, outline }),
+        getToggleClasses({ variant }),
+        className
+      )}
+      {...props}
+    />
+  )
+);
 
 Toggle.displayName = TogglePrimitive.Root.displayName;
 

package/src/components/Toggle/types.ts

@@ -3,13 +3,8 @@ import { type VariantProps } from "../../libs";
 import { getButtonClasses } from "../Button/constants";
 import { getToggleClasses } from "./constants";
 
-export type BaseToggleProps = Omit<
-  VariantProps<typeof getButtonClasses>,
-  "variant" | "isLoading"
-> &
+export type BaseToggleProps = Omit<VariantProps<typeof getButtonClasses>, "variant" | "isLoading"> &
   VariantProps<typeof getToggleClasses>;
 
-export type ToggleProps = React.ComponentPropsWithoutRef<
-  typeof TogglePrimitive.Root
-> &
+export type ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
   BaseToggleProps;

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -2,33 +2,19 @@
 
 import { createContext, forwardRef, useContext } from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import type {
-  ToggleGroupContextType,
-  ToggleGroupItemProps,
-  ToggleGroupProps,
-} from "./types";
+import type { ToggleGroupContextType, ToggleGroupItemProps, ToggleGroupProps } from "./types";
 import { cn } from "../../utilities";
+import { getButtonClasses } from "../Button/constants";
 import { getToggleClasses } from "../Toggle/constants";
 import { getToggleGroupClasses } from "./constants";
-import { getButtonClasses } from "../Button/constants";
 
 const ToggleGroupContext = createContext<ToggleGroupContextType>({
   variant: "default",
 });
 
-const ToggleGroup = ({
-  className,
-  variant,
-  children,
-  ...props
-}: ToggleGroupProps) => (
-  <ToggleGroupPrimitive.Root
-    className={cn(getToggleGroupClasses(), className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant }}>
-      {children}
-    </ToggleGroupContext.Provider>
+const ToggleGroup = ({ className, variant, children, ...props }: ToggleGroupProps) => (
+  <ToggleGroupPrimitive.Root className={cn(getToggleGroupClasses(), className)} {...props}>
+    <ToggleGroupContext.Provider value={{ variant }}>{children}</ToggleGroupContext.Provider>
   </ToggleGroupPrimitive.Root>
 );
 

package/src/components/ToggleGroup/constants.ts

@@ -1,5 +1,3 @@
 import { cva } from "../../libs";
 
-export const getToggleGroupClasses = cva(
-  "flex items-center justify-center gap-1"
-);
+export const getToggleGroupClasses = cva("flex items-center justify-center gap-1");

package/src/components/ToggleGroup/types.ts

@@ -1,9 +1,7 @@
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { BaseToggleProps } from "../Toggle/types";
 
-export type ToggleGroupProps = React.ComponentPropsWithoutRef<
-  typeof ToggleGroupPrimitive.Root
-> &
+export type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
   Pick<BaseToggleProps, "variant">;
 
 export type ToggleGroupItemProps = React.ComponentPropsWithoutRef<

package/src/components/Tooltip/Tooltip.tsx

@@ -1,12 +1,10 @@
 import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import type { TooltipArrowProps, TooltipContentProps } from "./types";
-import { getTooltipArrowClasses, getTooltipContentClasses } from "./constants";
 import { cn } from "../../utilities";
+import { getTooltipArrowClasses, getTooltipContentClasses } from "./constants";
 
-const Tooltip = (props: TooltipPrimitive.TooltipProps) => (
-  <TooltipPrimitive.Root {...props} />
-);
+const Tooltip = (props: TooltipPrimitive.TooltipProps) => <TooltipPrimitive.Root {...props} />;
 
 const TooltipArrow = ({ className, variant, ...props }: TooltipArrowProps) => (
   <TooltipPrimitive.Arrow

package/src/components/Tooltip/types.ts

@@ -1,6 +1,6 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { type VariantProps } from "../../libs";
 import { getTooltipArrowClasses, getTooltipContentClasses } from "./constants";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 export type TooltipArrowProps = React.HTMLAttributes<
   React.ElementRef<typeof TooltipPrimitive.Arrow>

package/src/libs/cva.ts

@@ -5,6 +5,4 @@ export { cva } from "class-variance-authority";
 type ExcludeNull<T> = { [P in keyof T]: Exclude<T[P], null> };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type VariantProps<T extends (...args: any) => any> = ExcludeNull<
-  OriginalVariantProps<T>
->;
+export type VariantProps<T extends (...args: any) => any> = ExcludeNull<OriginalVariantProps<T>>;