fix: colors & skeleton (codse#173)

Author: hari

animata/container/marquee.stories.tsx

@@ -64,7 +64,7 @@ export const Primary: Story = {
   },
 
   render: (args) => (
-    <div className="relative flex h-full max-h-96 min-h-72 w-full min-w-72 max-w-xl items-center justify-center overflow-hidden rounded border bg-background">
+    <div className="storybook-fix relative flex h-full max-h-96 min-h-72 w-full min-w-72 items-center justify-center overflow-hidden rounded border bg-background">
       <Marquee {...args}>
         <Content />
       </Marquee>
@@ -75,7 +75,7 @@ export const Primary: Story = {
 export const Vertical: Story = {
   args: { vertical: true },
   render: (args) => (
-    <div className="relative flex h-full max-h-96 min-h-72 w-full min-w-72 max-w-xl items-center justify-center overflow-hidden rounded-md border bg-background">
+    <div className="storybook-fix relative flex h-full max-h-96 min-h-72 w-full min-w-72 items-center justify-center overflow-hidden rounded-md border bg-background">
       <Marquee className="items-center" {...args}>
         <Content />
       </Marquee>
@@ -88,7 +88,7 @@ export const Multiple: Story = {
   render: (args) => (
     <div
       className={cn(
-        "relative flex h-full max-h-96 min-h-72 w-full min-w-72 max-w-xl items-center justify-center overflow-hidden rounded-md border bg-background",
+        "storybook-fix relative flex h-full max-h-96 min-h-72 w-full min-w-72 items-center justify-center overflow-hidden rounded-md border bg-background",
         {
           "flex-row": args.vertical,
           "flex-col": !args.vertical,

animata/container/marquee.tsx

@@ -43,42 +43,41 @@ export default function Marquee({
   ...props
 }: MarqueeProps) {
   return (
-    <>
-      <div
-        {...props}
-        className={cn(
-          "group relative flex h-full w-full overflow-hidden p-2 [--duration:10s] [--gap:12px] [gap:var(--gap)]",
-          {
-            "flex-col": vertical,
-            "flex-row": !vertical,
-          },
-          className,
-        )}
-      >
-        {Array.from({ length: repeat }).map((_, index) => (
-          <div
-            key={`item-${index}`}
-            className={cn("flex shrink-0 [gap:var(--gap)]", {
-              "group-hover:[animation-play-state:paused]": pauseOnHover,
-              "[animation-direction:reverse]": reverse,
-              "animate-marquee-horizontal flex-row": !vertical,
-              "animate-marquee-vertical flex-col": vertical,
-            })}
-          >
-            {children}
-          </div>
-        ))}
-      </div>
-      {applyMask && (
+    <div
+      {...props}
+      className={cn(
+        "group relative flex h-full w-full p-2 [--duration:10s] [--gap:12px] [gap:var(--gap)]",
+        {
+          "flex-col": vertical,
+          "flex-row": !vertical,
+        },
+        className,
+      )}
+    >
+      {Array.from({ length: repeat }).map((_, index) => (
         <div
-          className={cn("pointer-events-none absolute z-10 h-full w-full", {
-            "bg-gradient-to-b from-white/50 from-5% via-transparent via-50% to-white/50 to-95% dark:from-black/50 dark:to-black/50":
-              vertical,
-            "bg-gradient-to-r from-white/50 from-5% via-transparent via-50% to-white/50 to-95% dark:from-black/50 dark:to-black/50":
-              !vertical,
+          key={`item-${index}`}
+          className={cn("flex shrink-0 [gap:var(--gap)]", {
+            "group-hover:[animation-play-state:paused]": pauseOnHover,
+            "[animation-direction:reverse]": reverse,
+            "animate-marquee-horizontal flex-row": !vertical,
+            "animate-marquee-vertical flex-col": vertical,
           })}
+        >
+          {children}
+        </div>
+      ))}
+      {applyMask && (
+        <div
+          className={cn(
+            "pointer-events-none absolute inset-0 z-10 h-full w-full from-white/50 from-5% via-transparent via-50% to-white/50 to-95% dark:from-gray-800/50 dark:via-transparent dark:to-gray-800/50",
+            {
+              "bg-gradient-to-b": vertical,
+              "bg-gradient-to-r": !vertical,
+            },
+          )}
         />
       )}
-    </>
+    </div>
   );
 }

animata/skeleton/code.tsx

@@ -2,7 +2,7 @@ import { CodeIcon } from "lucide-react";
 
 export default function Code() {
   return (
-    <div className="flex h-48 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700">
+    <div className="flex min-h-52 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700">
       <CodeIcon className="w-6 text-blue-500" />
       <div className="flex flex-1 flex-col justify-center gap-2">
         <div className="h-2 w-1/2 rounded-md bg-muted" />

animata/skeleton/cookie-banner.tsx

@@ -1,6 +1,6 @@
 export default function CookieBanner() {
   return (
-    <div className="flex h-48 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700">
+    <div className="flex min-h-52 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700">
       <div className="flex flex-1 flex-col justify-center gap-2">
         <div className="h-2 w-1/2 rounded-md bg-muted-foreground/25" />
         <div className="h-2 w-3/4 rounded-md bg-muted" />

animata/skeleton/list.tsx

@@ -1,6 +1,6 @@
 export default function List() {
   return (
-    <div className="flex min-h-48 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700">
+    <div className="flex min-h-52 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700">
       {Array.from({ length: 6 }).map((_, i) => (
         <div key={`item-${i}`} className="flex w-full items-center justify-between gap-2">
           <div className="h-2 w-2 rounded-md bg-muted" />
@@ -9,7 +9,7 @@ export default function List() {
         </div>
       ))}
 
-      <div className="flex w-full justify-end gap-2">
+      <div className="mt-auto flex w-full justify-end gap-2">
         <button className="w-2/5 rounded-sm bg-green-500 p-2">
           <span className="block h-1.5 rounded-sm bg-muted" />
         </button>

animata/skeleton/receipt.tsx

@@ -2,7 +2,7 @@ import { Building, DollarSign } from "lucide-react";
 
 export default function Receipt() {
   return (
-    <div className="flex min-h-48 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700">
+    <div className="flex min-h-52 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700">
       <div className="flex justify-between border-b pb-3 dark:border-zinc-700">
         <Building className="w-6 text-muted-foreground" />
         <DollarSign className="w-6 text-blue-600" />
@@ -33,7 +33,7 @@ export default function Receipt() {
         <div className="h-2 w-8 rounded-md bg-muted" />
       </div>
 
-      <span className="inline-block w-fit rounded-md bg-blue-600 px-2 py-1 text-center text-xs font-semibold text-white">
+      <span className="mt-auto inline-block w-fit rounded-md bg-blue-600 px-2 py-1 text-center text-xs font-semibold text-white">
         Receipt
       </span>
     </div>

animata/skeleton/report.tsx

@@ -4,7 +4,7 @@ export default function Report({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        "flex min-h-48 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700",
+        "flex min-h-52 w-52 flex-col gap-3 rounded-md border bg-background p-3 shadow-xl transition-shadow hover:shadow-sm dark:border-zinc-700",
         className,
       )}
     >

components/command-menu.tsx

@@ -55,14 +55,13 @@ export function CommandMenu({ ...props }: DialogProps) {
       <Button
         variant="outline"
         className={cn(
-          "relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64",
+          "relative h-8 w-full justify-start rounded-full border-none bg-foreground/10 px-4 text-sm font-normal text-background/75 shadow-none transition-all duration-300 hover:bg-foreground/20 hover:text-background/80 md:w-40 lg:w-64",
         )}
         onClick={() => setOpen(true)}
         {...props}
       >
-        <span className="hidden lg:inline-flex">Search documentation...</span>
-        <span className="inline-flex lg:hidden">Search...</span>
-        <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+        <span className="inline-flex flex-1">Search...</span>
+        <kbd className="pointer-events-none hidden flex-shrink-0 select-none items-center gap-1 rounded border border-background/30 bg-muted-foreground px-2 font-mono text-[10px] font-medium sm:flex">
           <span className="text-xs">⌘</span>K
         </kbd>
       </Button>
@@ -72,7 +71,7 @@ export function CommandMenu({ ...props }: DialogProps) {
           <CommandEmpty>No results found.</CommandEmpty>
           <CommandGroup heading="Links">
             {docsConfig.mainNav
-              .filter((navitem) => !navitem.external)
+              .filter((item) => !item.external)
               .map((navItem) => (
                 <CommandItem
                   key={navItem.href}

components/ui/accordion.tsx

@@ -1,24 +1,24 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border-b", className)}
+    className={cn("border-b border-border", className)}
     {...props}
   />
-))
-AccordionItem.displayName = "AccordionItem"
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -29,16 +29,16 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       className={cn(
         "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -51,7 +51,7 @@ const AccordionContent = React.forwardRef<
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };