@launchui/launch-ui 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchui/launch-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A shadcn/ui inspired CLI component installer for Next, Vite, React, Astro.",
   "type": "module",
   "main": "./dist/index.js",

package/registry/components/3d-card/index.tsx

@@ -12,10 +12,12 @@ export const CardContainer = ({
   children,
   className,
   containerClassName,
+  style,
 }: {
   children: React.ReactNode;
   className?: string;
   containerClassName?: string;
+  style?: React.CSSProperties;
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isMouseEntered, setIsMouseEntered] = useState(false);
@@ -72,6 +74,7 @@ export const CardContainer = ({
             transformStyle: "preserve-3d",
             rotateX,
             rotateY,
+            ...style
           }}
           className={`flex items-center justify-center relative transition-all duration-200 ease-linear ${className}`}
         >
@@ -88,16 +91,19 @@ export const CardContainer = ({
 export const CardBody = ({
   children,
   className,
+  style,
 }: {
   children: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 }) => {
   return (
     <div
       style={{
         transformStyle: "preserve-3d",
+        ...style
       }}
-      className={`h-96 w-96 [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d] ${className}`}
+      className={`[transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d] ${className}`}
     >
       {children}
     </div>
@@ -167,7 +173,12 @@ interface ThreeDCardProps {
   description?: string;
   imageUrl?: string;
   ctaText?: string;
+  ctaHref?: string;
   actionText?: string;
+  actionHref?: string;
+  className?: string;
+  containerClassName?: string;
+  style?: React.CSSProperties;
 }
 
 export function ThreeDCard({
@@ -175,16 +186,24 @@ export function ThreeDCard({
   description = "Hover over this card to unleash the power of CSS perspective",
   imageUrl = "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop",
   ctaText = "Try now \u2192",
-  actionText = "Sign up"
+  ctaHref = "#",
+  actionText = "Sign up",
+  actionHref = "#",
+  className,
+  containerClassName,
+  style
 }: ThreeDCardProps) {
   return (
-    <CardContainer className="inter-var">
-      <CardBody className="bg-white relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-[#0a0a0a] dark:border-white/[0.2] border-neutral-200 border-opacity-50 w-auto sm:w-[30rem] h-auto rounded-2xl p-8 border shadow-sm">
+    <CardContainer className={`inter-var w-full flex justify-center items-center ${containerClassName}`}>
+      <CardBody 
+        style={style}
+        className={`bg-gray-50 relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-full max-w-[22rem] sm:max-w-[30rem] h-auto rounded-xl p-6 border ${className}`}
+      >
         
         {/* Title Elevated */}
         <CardItem
           translateZ="50"
-          className="text-2xl font-bold text-neutral-800 dark:text-white"
+          className="text-xl font-bold text-neutral-600 dark:text-white"
         >
           {title}
         </CardItem>
@@ -193,18 +212,18 @@ export function ThreeDCard({
         <CardItem
           as="p"
           translateZ="60"
-          className="text-neutral-500 text-base max-w-sm mt-2 dark:text-neutral-300 leading-relaxed"
+          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
         >
           {description}
         </CardItem>
 
         {/* Imagery container with maximum depth and radius */}
-        <CardItem translateZ="100" className="w-full mt-8">
+        <CardItem translateZ="100" className="w-full mt-4">
           <img
             src={imageUrl}
             height="1000"
             width="1000"
-            className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl transition-shadow"
+            className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
             alt="thumbnail"
           />
         </CardItem>
@@ -214,8 +233,9 @@ export function ThreeDCard({
           {/* Lower left navigation prompt */}
           <CardItem
             translateZ={20}
-            as="button"
-            className="px-2 py-2 text-sm font-medium text-neutral-800 dark:text-white hover:underline underline-offset-4"
+            as="a"
+            href={ctaHref}
+            className="px-4 py-2 rounded-xl text-xs font-normal text-black dark:text-white hover:underline underline-offset-4 cursor-pointer inline-block"
           >
             {ctaText}
           </CardItem>
@@ -223,8 +243,9 @@ export function ThreeDCard({
           {/* Right primary action capsule */}
           <CardItem
             translateZ={20}
-            as="button"
-            className="px-5 py-2.5 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold shadow-md transition-all active:scale-95"
+            as="a"
+            href={actionHref}
+            className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold shadow-md transition-all active:scale-95 cursor-pointer inline-block"
           >
             {actionText}
           </CardItem>