@authdog/react-elements 0.0.12 → 0.0.14

package/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@authdog/react-elements/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@authdog/react-elements/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@authdog/react-elements/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@authdog/react-elements/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@authdog/react-elements/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/index.ts

@@ -1,2 +1,3 @@
-export * from "./components/ui/button";
-export {Navbar} from "./components/core/navbar"
+export {Button} from "./components/ui/button";
+export {Navbar} from "./components/core/navbar";
+export {UserProfile} from "./components/core/user-profile";

package/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import '../dist/styles.css';
+
+// This is the main entry point for Ladle
+export default function Main({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      {children}
+    </div>
+  );
+} 

package/src/preview.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+// This is the preview component for Ladle
+export default function Preview({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ladle-main">
+      {children}
+    </div>
+  );
+} 

package/src/stories/Button.stories.tsx

@@ -0,0 +1,24 @@
+import type { Story } from '@ladle/react';
+import { Button } from '../components/ui/button';
+import "../global.css";
+
+export const Default: Story = () => <Button>Click me</Button>;
+Default.storyName = 'Default Button';
+
+export const Primary: Story = () => <Button variant="default">Primary</Button>;
+Primary.storyName = 'Primary Button';
+
+export const Secondary: Story = () => <Button variant="secondary">Secondary</Button>;
+Secondary.storyName = 'Secondary Button';
+
+export const Destructive: Story = () => <Button variant="destructive">Delete</Button>;
+Destructive.storyName = 'Destructive Button';
+
+export const Outline: Story = () => <Button variant="outline">Outline</Button>;
+Outline.storyName = 'Outline Button';
+
+export const Ghost: Story = () => <Button variant="ghost">Ghost</Button>;
+Ghost.storyName = 'Ghost Button';
+
+export const Link: Story = () => <Button variant="link">Link</Button>;
+Link.storyName = 'Link Button'; 

package/src/stories/LoginForm.stories.tsx

@@ -0,0 +1,29 @@
+// import { useState, useEffect } from "react"
+import type { Story } from "@ladle/react"
+import { LoginForm } from "../components/flow/login"
+import "../global.css"
+
+export const Default: Story = () => <LoginForm />
+Default.storyName = "Default Login Form"
+
+// export const Loading: Story = () => {
+//   const [isLoading, setIsLoading] = useState(true)
+//   useEffect(() => {
+//     const timer = setTimeout(() => setIsLoading(false), 2000)
+//     return () => clearTimeout(timer)
+//   }, [])
+//   return <LoginForm />
+// }
+// Loading.storyName = "Loading State"
+
+// export const WithError: Story = () => {
+//   const [error, setError] = useState("Invalid email or password")
+//   return <LoginForm />
+// }
+// WithError.storyName = "With Error Message"
+
+// export const WithPrefilledEmail: Story = () => {
+//   const [email, setEmail] = useState("user@example.com")
+//   return <LoginForm />
+// }
+// WithPrefilledEmail.storyName = "With Pre-filled Email" 

package/src/stories/Navbar.stories.tsx

@@ -0,0 +1,22 @@
+import type { Story } from '@ladle/react';
+import { Navbar } from "../components/core/navbar"
+import { Button } from "../components/ui/button"
+import "../global.css"
+
+export const Default: Story = () => <Navbar logoText="Authdog" />;
+Default.storyName = 'Default Navbar';
+
+export const CustomNavigation: Story = () => <Navbar logoText="Authdog" items={[{ title: "Home", href: "/" }, { title: "Features", href: "/features" }, { title: "Pricing", href: "/pricing" }, { title: "Contact", href: "/contact" }]} />;
+CustomNavigation.storyName = 'Custom Navigation';
+
+export const CustomUser: Story = () => <Navbar logoText="Authdog" user={{ name: "Jane Smith", email: "jane@Authdog.com", image: "https://github.com/shadcn.png" }} />;
+CustomUser.storyName = 'Custom User';
+
+export const WithChildren: Story = () => <Navbar logoText="Authdog" children={<Button variant="outline" size="sm">Get Started</Button>} />;
+WithChildren.storyName = 'With Children';
+
+export const CustomStyling: Story = () => <Navbar logoText="Authdog" className="bg-gradient-to-r from-blue-500 to-purple-500 text-white" />;
+CustomStyling.storyName = 'Custom Styling';
+
+export const WithDisabledItems: Story = () => <Navbar logoText="Authdog" items={[{ title: "Dashboard", href: "/dashboard" }, { title: "Projects", href: "/projects" }, { title: "Team", href: "/team", disabled: true }, { title: "Reports", href: "/reports", disabled: true }]} />;
+WithDisabledItems.storyName = 'With Disabled Items'; 

package/src/stories/UserProfile.stories.tsx

@@ -0,0 +1,56 @@
+import type { Story } from '@ladle/react';
+import { UserProfile, UserProfileProps } from '../components/core/user-profile';
+import "../global.css";
+
+export const Default: Story = () => (
+  <UserProfile
+    user={{
+      name: "Jaylon Dias",
+      email: "example@clerk.dev",
+      image: "/placeholder-user.jpg"
+    }}
+  />
+);
+Default.storyName = 'Default User Profile';
+
+export const WithCustomUser: Story = () => (
+  <UserProfile 
+    user={{
+      name: "Jane Smith",
+      email: "jane@example.com",
+      image: "/placeholder-user.jpg"
+    }}
+  />
+);
+WithCustomUser.storyName = 'User Profile with Custom User';
+
+export const WithMultipleEmails: Story = () => (
+  <UserProfile 
+    user={{
+      name: "John Doe",
+      email: "john@example.com",
+      image: "/placeholder-user.jpg"
+    }}
+    emails={[
+      { address: "john@example.com", isPrimary: true },
+      { address: "john@personal.com", isPrimary: false },
+      { address: "john@work.com", isPrimary: false }
+    ]}
+  />
+);
+WithMultipleEmails.storyName = 'User Profile with Multiple Emails';
+
+export const WithConnectedAccounts: Story = () => (
+  <UserProfile 
+    user={{
+      name: "Alex Johnson",
+      email: "alex@example.com",
+      image: "/placeholder-user.jpg"
+    }}
+    connectedAccounts={[
+      { provider: "Google", email: "alex@gmail.com" },
+      { provider: "GitHub", email: "alex@github.com" }
+    ]}
+  />
+);
+WithConnectedAccounts.storyName = 'User Profile with Connected Accounts'; 

package/tailwind.config.ts

@@ -4,11 +4,11 @@ import tailwindcssAnimate from "tailwindcss-animate";
 const config = {
   darkMode: ["class"],
   content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-     "./components/**/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}"
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.stories.{js,ts,jsx,tsx}",
+    "./src/components/**/*.{js,ts,jsx,tsx}",
+    "./src/components/**/**/*.{js,ts,jsx,tsx}",
+    "./src/preview.{js,ts,jsx,tsx}",
   ],
   prefix: "",
   theme: {