@arolariu/components 0.2.0 → 0.3.1

package/src/components/ui/tooltip.tsx

@@ -5,52 +5,28 @@ import * as React from "react";
 
 import {cn} from "@/lib/utilities";
 
-function TooltipProvider({delayDuration = 0, ...props}: Readonly<React.ComponentProps<typeof TooltipPrimitive.Provider>>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot='tooltip-provider'
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
+const TooltipProvider = TooltipPrimitive.Provider;
 
-function Tooltip({...props}: Readonly<React.ComponentProps<typeof TooltipPrimitive.Root>>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root
-        data-slot='tooltip'
-        {...props}
-      />
-    </TooltipProvider>
-  );
-}
+const Tooltip = TooltipPrimitive.Root;
 
-function TooltipTrigger({...props}: Readonly<React.ComponentProps<typeof TooltipPrimitive.Trigger>>) {
-  return (
-    <TooltipPrimitive.Trigger
-      data-slot='tooltip-trigger'
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({className, sideOffset = 4, ...props}, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900",
+        className,
+      )}
       {...props}
     />
-  );
-}
-
-function TooltipContent({className, sideOffset = 0, children, ...props}: Readonly<React.ComponentProps<typeof TooltipPrimitive.Content>>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot='tooltip-content'
-        sideOffset={sideOffset}
-        className={cn(
-          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-balance text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900",
-          className,
-        )}
-        {...props}>
-        {children}
-        <TooltipPrimitive.Arrow className='fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-neutral-900 dark:bg-neutral-50' />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger};

package/src/components/ui/typewriter.tsx

@@ -3,7 +3,6 @@
 import {cn} from "@/lib/utilities";
 import {motion, stagger, useAnimate, useInView} from "motion/react";
 import * as React from "react";
-import {useEffect} from "react";
 
 export const TypewriterText = ({
   words,
@@ -21,13 +20,13 @@ export const TypewriterText = ({
   const wordsArray = words.map((word) => {
     return {
       ...word,
-      text: [...word.text],
+      text: word.text.split(""),
     };
   });
 
   const [scope, animate] = useAnimate();
   const isInView = useInView(scope);
-  useEffect(() => {
+  React.useEffect(() => {
     if (isInView) {
       animate(
         "span",
@@ -106,7 +105,7 @@ export const TypewriterTextSmooth = ({
   const wordsArray = words.map((word) => {
     return {
       ...word,
-      text: [...word.text],
+      text: word.text.split(""),
     };
   });
   const renderWords = () => {

package/src/index.css

@@ -1,12 +1,12 @@
 @import "tailwindcss";
 @config '../tailwind.config.ts';
 @custom-variant dark (&:is(.dark *));
-
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
   looks the same as it did with Tailwind CSS v3.
-
+
   If we ever want to remove these styles, we need to add an explicit border
   color utility to any element that depends on these defaults.
 */
@@ -19,7 +19,7 @@
     border-color: var(--color-gray-200, currentcolor);
   }
 }
-
+
 :root {
   --sidebar: hsl(0 0% 98%);
   --sidebar-foreground: hsl(240 5.3% 26.1%);
@@ -40,7 +40,7 @@
   --sidebar-border: hsl(240 3.7% 15.9%);
   --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
-
+
 @theme inline {
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
@@ -52,7 +52,7 @@
   --color-sidebar-ring: var(--sidebar-ring);
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
-
+
   @keyframes accordion-down {
     from {
       height: 0;
@@ -61,7 +61,7 @@
       height: var(--radix-accordion-content-height);
     }
   }
-
+
   @keyframes accordion-up {
     from {
       height: var(--radix-accordion-content-height);

package/src/index.ts

@@ -34,9 +34,11 @@ export {
 
 export {Button, buttonVariants} from "./components/ui/button";
 
+export {ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants} from "./components/ui/button-group";
+
 export {Calendar} from "./components/ui/calendar";
 
-export {Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "./components/ui/card";
+export {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "./components/ui/card";
 
 export {Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi} from "./components/ui/carousel";
 
@@ -48,8 +50,6 @@ export {
   ChartTooltip,
   ChartTooltipContent,
   type ChartConfig,
-  type ChartLegendContentProps,
-  type CustomTooltipProps,
 } from "./components/ui/chart";
 
 export {Checkbox} from "./components/ui/checkbox";
@@ -130,6 +130,8 @@ export {
   DropdownMenuTrigger,
 } from "./components/ui/dropdown-menu";
 
+export {Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle} from "./components/ui/empty";
+
 export {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField} from "./components/ui/form";
 
 export {HoverCard, HoverCardContent, HoverCardTrigger} from "./components/ui/hover-card";
@@ -138,6 +140,30 @@ export {InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot} from "./compon
 
 export {Input} from "./components/ui/input";
 
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "./components/ui/input-group";
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "./components/ui/item";
+
+export {Kbd, KbdGroup} from "./components/ui/kbd";
+
 export {Label} from "./components/ui/label";
 
 export {
@@ -206,7 +232,18 @@ export {
 
 export {Separator} from "./components/ui/separator";
 
-export {Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger} from "./components/ui/sheet";
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+} from "./components/ui/sheet";
 
 export {
   Sidebar,
@@ -237,6 +274,8 @@ export {
 
 export {Skeleton} from "./components/ui/skeleton";
 
+export {Spinner} from "./components/ui/spinner";
+
 export {Slider} from "./components/ui/slider";
 
 export {Toaster, toast} from "./components/ui/sonner";