love-ui 1.2.13 → 1.2.15

package/registry/default/examples/separator-demo.tsx

@@ -0,0 +1,25 @@
+import { Separator } from "@/registry/default/ui/separator"
+
+export default function SeparatorDemo() {
+  return (
+    <div className="max-w-72">
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium">loveui</h4>
+        <p className="text-sm text-muted-foreground">
+          Unstyled, accessible primitives for fast product UI and design
+          systems.
+        </p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex items-center gap-4 text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+        <Separator orientation="vertical" />
+        <div>Releases</div>
+      </div>
+    </div>
+  )
+}

package/registry/default/examples/separator-section-label.tsx

@@ -0,0 +1,11 @@
+import { Separator } from "@/registry/default/ui/separator"
+
+export default function SeparatorSectionLabel() {
+  return (
+    <div className="w-full max-w-sm space-y-3">
+      <div className="text-sm font-medium">Account</div>
+      <Separator />
+      <p className="text-sm text-muted-foreground">Profile, security, and billing settings.</p>
+    </div>
+  )
+}

package/registry/default/examples/separator-timeline.tsx

@@ -0,0 +1,13 @@
+import { Separator } from "@/registry/default/ui/separator"
+
+export default function SeparatorTimeline() {
+  return (
+    <div className="flex h-24 items-center gap-4 text-sm">
+      <div>Draft</div>
+      <Separator orientation="vertical" />
+      <div>Review</div>
+      <Separator orientation="vertical" />
+      <div>Publish</div>
+    </div>
+  )
+}

package/registry/default/examples/separator-vertical-stack.tsx

@@ -0,0 +1,13 @@
+import { Separator } from "@/registry/default/ui/separator"
+
+export default function SeparatorVerticalStack() {
+  return (
+    <div className="flex h-24 items-center rounded-xl border p-4 text-sm">
+      <span>12 files</span>
+      <Separator orientation="vertical" className="mx-4" />
+      <span>4.8 MB</span>
+      <Separator orientation="vertical" className="mx-4" />
+      <span>Synced</span>
+    </div>
+  )
+}

package/registry/default/examples/sheet-checkout-summary.tsx

@@ -0,0 +1,19 @@
+import { Button } from "@/registry/default/ui/button"
+import { Sheet, SheetFooter, SheetHeader, SheetPopup, SheetTitle, SheetTrigger } from "@/registry/default/ui/sheet"
+
+export default function SheetCheckoutSummary() {
+  return (
+    <Sheet>
+      <SheetTrigger render={<Button variant="outline" />}>Order summary</SheetTrigger>
+      <SheetPopup>
+        <SheetHeader><SheetTitle>Checkout</SheetTitle></SheetHeader>
+        <div className="grid gap-3 px-4 text-sm">
+          <div className="flex justify-between"><span>Pro plan</span><span>$29</span></div>
+          <div className="flex justify-between"><span>Tax</span><span>$2.32</span></div>
+          <div className="flex justify-between font-medium"><span>Total</span><span>$31.32</span></div>
+        </div>
+        <SheetFooter><Button>Pay now</Button></SheetFooter>
+      </SheetPopup>
+    </Sheet>
+  )
+}

package/registry/default/examples/sheet-demo.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button } from "@/registry/default/ui/button"
+import { Field, FieldControl, FieldLabel } from "@/registry/default/ui/field"
+import { Form } from "@/registry/default/ui/form"
+import {
+  Sheet,
+  SheetClose,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetPopup,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/default/ui/sheet"
+
+export default function DialogDemo() {
+  return (
+    <Sheet>
+      <SheetTrigger
+        render={(props) => (
+          <Button {...props} variant="outline">
+            Open Sheet
+          </Button>
+        )}
+      />
+      <SheetPopup>
+        <Form className="grid gap-4">
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>
+              Make changes to your profile here. Click save when
+              you&apos;re done.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="flex flex-col gap-4 px-4">
+            <Field>
+              <FieldLabel>Name</FieldLabel>
+              <FieldControl type="text" defaultValue="Connor Love" />
+            </Field>
+            <Field>
+              <FieldLabel>Username</FieldLabel>
+              <FieldControl type="text" defaultValue="@loveconnor" />
+            </Field>
+          </div>
+          <SheetFooter>
+            <SheetClose
+              render={(props) => (
+                <Button {...props} variant="ghost">
+                  Cancel
+                </Button>
+              )}
+            />
+            <Button type="submit">Save</Button>
+          </SheetFooter>
+        </Form>
+      </SheetPopup>
+    </Sheet>
+  )
+}

package/registry/default/examples/sheet-position.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetPopup,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/default/ui/sheet"
+
+export default function DialogDemo() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Sheet>
+        <SheetTrigger
+          render={(props) => (
+            <Button {...props} variant="outline">
+              Open Right
+            </Button>
+          )}
+        />
+        <SheetPopup showCloseButton={false}>
+          <SheetHeader>
+            <SheetTitle>Right</SheetTitle>
+            <SheetDescription>
+              Right side of the screen.
+            </SheetDescription>
+          </SheetHeader>
+        </SheetPopup>
+      </Sheet>
+      <Sheet>
+        <SheetTrigger
+          render={(props) => (
+            <Button {...props} variant="outline">
+              Open Left
+            </Button>
+          )}
+        />
+        <SheetPopup side="left" showCloseButton={false}>
+          <SheetHeader>
+            <SheetTitle>Left</SheetTitle>
+            <SheetDescription>
+              Left side of the screen.
+            </SheetDescription>
+          </SheetHeader>
+        </SheetPopup>
+      </Sheet>
+      <Sheet>
+        <SheetTrigger
+          render={(props) => (
+            <Button {...props} variant="outline">
+              Open Top
+            </Button>
+          )}
+        />
+        <SheetPopup side="top" showCloseButton={false}>
+          <SheetHeader>
+            <SheetTitle>Top</SheetTitle>
+            <SheetDescription>Top of the screen.</SheetDescription>
+          </SheetHeader>
+        </SheetPopup>
+      </Sheet>
+      <Sheet>
+        <SheetTrigger
+          render={(props) => (
+            <Button {...props} variant="outline">
+              Open Bottom
+            </Button>
+          )}
+        />
+        <SheetPopup side="bottom" showCloseButton={false}>
+          <SheetHeader>
+            <SheetTitle>Bottom</SheetTitle>
+            <SheetDescription>Bottom of the screen.</SheetDescription>
+          </SheetHeader>
+        </SheetPopup>
+      </Sheet>
+    </div>
+  )
+}

package/registry/default/examples/sheet-profile-editor.tsx

@@ -0,0 +1,19 @@
+import { Button } from "@/registry/default/ui/button"
+import { Field, FieldControl, FieldLabel } from "@/registry/default/ui/field"
+import { Sheet, SheetFooter, SheetHeader, SheetPopup, SheetTitle, SheetTrigger } from "@/registry/default/ui/sheet"
+
+export default function SheetProfileEditor() {
+  return (
+    <Sheet>
+      <SheetTrigger render={<Button variant="outline" />}>Edit profile</SheetTrigger>
+      <SheetPopup>
+        <SheetHeader><SheetTitle>Profile</SheetTitle></SheetHeader>
+        <div className="grid gap-4 px-4">
+          <Field><FieldLabel>Name</FieldLabel><FieldControl defaultValue="Alex Morgan" /></Field>
+          <Field><FieldLabel>Role</FieldLabel><FieldControl defaultValue="Designer" /></Field>
+        </div>
+        <SheetFooter><Button>Save changes</Button></SheetFooter>
+      </SheetPopup>
+    </Sheet>
+  )
+}

package/registry/default/examples/skeleton-chat-list.tsx

@@ -0,0 +1,14 @@
+import { Skeleton } from "@/registry/default/ui/skeleton"
+
+export default function SkeletonChatList() {
+  return (
+    <div className="grid w-full max-w-xs gap-4">
+      {[1, 2, 3].map((item) => (
+        <div key={item} className="flex items-center gap-3">
+          <Skeleton className="size-10 rounded-full" />
+          <div className="flex-1 space-y-2"><Skeleton className="h-3 w-full" /><Skeleton className="h-3 w-2/3" /></div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/registry/default/examples/skeleton-dashboard-card.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@/registry/default/ui/skeleton"
+
+export default function SkeletonDashboardCard() {
+  return (
+    <div className="w-full max-w-sm rounded-xl border p-4">
+      <Skeleton className="h-4 w-28" />
+      <Skeleton className="mt-4 h-10 w-40" />
+      <div className="mt-6 grid grid-cols-3 gap-2">
+        <Skeleton className="h-16" />
+        <Skeleton className="h-16" />
+        <Skeleton className="h-16" />
+      </div>
+    </div>
+  )
+}

package/registry/default/examples/skeleton-demo.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { UserRoundPlusIcon, UsersRoundIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import { Button } from "@/registry/default/ui/button"
+import { Skeleton } from "@/registry/default/ui/skeleton"
+
+const users = [
+  {
+    name: "Sarah Johnson",
+    role: "Design Engineer",
+    followers: "15k",
+    image:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&dpr=2&q=80",
+    fallback: "SJ",
+    delay: 3000,
+  },
+  {
+    name: "Mark Bennett Andersson",
+    role: "Product Designer",
+    followers: "8k",
+    image:
+      "https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=80&h=80&dpr=2&q=80",
+    fallback: "MA",
+    delay: 4000,
+  },
+  {
+    name: "Alex Rivera",
+    role: "UI/UX Designer",
+    followers: "12k",
+    image:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&dpr=2&q=80",
+    fallback: "AR",
+    delay: 3400,
+  },
+]
+
+function UserCard({ delay, user }: { delay: number; user: (typeof users)[0] }) {
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoaded(true)
+    }, delay)
+
+    return () => clearTimeout(timer)
+  }, [delay])
+
+  if (!isLoaded) {
+    return <UserCardSkeleton />
+  }
+
+  return (
+    <>
+      <Avatar className="size-10">
+        <AvatarImage src={user.image} alt={user.name} />
+        <AvatarFallback>{user.fallback}</AvatarFallback>
+      </Avatar>
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <h4 className="line-clamp-1 text-sm font-medium">{user.name}</h4>
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          <span className="truncate">{user.role}</span>
+          <div className="flex min-w-0 items-center gap-1">
+            <UsersRoundIcon className="size-3 shrink-0" />
+            <span className="truncate">
+              {user.followers}
+              <span className="max-sm:hidden"> followers</span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <Button size="xs">
+        <UserRoundPlusIcon />
+        Follow
+      </Button>
+    </>
+  )
+}
+
+function UserCardSkeleton() {
+  return (
+    <>
+      <Skeleton className="size-10 rounded-full" />
+      <div className="flex flex-1 flex-col">
+        <Skeleton className="my-0.5 h-4 max-w-54" />
+        <div className="flex max-w-54 items-center gap-1">
+          <Skeleton className="my-0.5 h-4 w-1/2" />
+          <Skeleton className="my-0.5 h-4 w-1/2" />
+        </div>
+      </div>
+      <Skeleton className="h-6 w-17" />
+    </>
+  )
+}
+
+export default function SkeletonDemo() {
+  return (
+    <div className="flex w-full max-w-92 flex-col gap-6">
+      {users.map((user) => (
+        <div key={user.fallback} className="flex items-center gap-4">
+          <UserCard delay={user.delay} user={user} />
+        </div>
+      ))}
+    </div>
+  )
+}

package/registry/default/examples/skeleton-only.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from "@/registry/default/ui/skeleton"
+
+export default function SkeletonOnly() {
+  return (
+    <div className="flex w-full max-w-92 items-center gap-4">
+      <Skeleton className="size-10 rounded-full" />
+      <div className="flex flex-1 flex-col">
+        <Skeleton className="my-0.5 h-4 max-w-54" />
+        <div className="flex max-w-54 items-center gap-1">
+          <Skeleton className="my-0.5 h-4 w-1/2" />
+          <Skeleton className="my-0.5 h-4 w-1/2" />
+        </div>
+      </div>
+      <Skeleton className="h-6 w-17" />
+    </div>
+  )
+}

package/registry/default/examples/slider-demo.tsx

@@ -0,0 +1,5 @@
+import { Slider } from "@/registry/default/ui/slider"
+
+export default function SliderDemo() {
+  return <Slider defaultValue={50} />
+}

package/registry/default/examples/slider-form.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+} from "@/registry/default/ui/field"
+import { Form } from "@/registry/default/ui/form"
+import { Slider, SliderValue } from "@/registry/default/ui/slider"
+
+export default function SliderForm() {
+  const [loading, setLoading] = React.useState<boolean>(false)
+  const [value, setValue] = React.useState<number | readonly number[]>([25, 75])
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    setLoading(true)
+    await new Promise((r) => setTimeout(r, 800))
+    setLoading(false)
+    const volumes = formData.getAll("volume")
+    alert(`Volume: ${volumes.join(", ")}`)
+  }
+
+  return (
+    <Form onSubmit={onSubmit} className="grid gap-4">
+      <Field name="volume" className="items-stretch gap-3">
+        <Slider value={value} onValueChange={setValue} disabled={loading}>
+          <div className="mb-2 flex items-center justify-between gap-1">
+            <FieldLabel>Volume</FieldLabel>
+            <SliderValue />
+          </div>
+        </Slider>
+        <FieldDescription>
+          Choose a value between 0 and 100
+        </FieldDescription>
+      </Field>
+      <Button type="submit" disabled={loading}>
+        Submit
+      </Button>
+    </Form>
+  )
+}

package/registry/default/examples/slider-opacity.tsx

@@ -0,0 +1,12 @@
+import { Slider, SliderValue } from "@/registry/default/ui/slider"
+
+export default function SliderOpacity() {
+  return (
+    <Slider className="max-w-xs" defaultValue={72}>
+      <div className="mb-2 flex justify-between text-sm font-medium">
+        <span>Opacity</span>
+        <SliderValue />
+      </div>
+    </Slider>
+  )
+}

package/registry/default/examples/slider-range.tsx

@@ -0,0 +1,5 @@
+import { Slider } from "@/registry/default/ui/slider"
+
+export default function SliderDemo() {
+  return <Slider defaultValue={[25, 75]} />
+}

package/registry/default/examples/slider-vertical.tsx

@@ -0,0 +1,5 @@
+import { Slider } from "@/registry/default/ui/slider"
+
+export default function SliderVertical() {
+  return <Slider orientation="vertical" defaultValue={50} />
+}

package/registry/default/examples/slider-with-label-value.tsx

@@ -0,0 +1,13 @@
+import { Label } from "@/registry/default/ui/label"
+import { Slider, SliderValue } from "@/registry/default/ui/slider"
+
+export default function SliderWithLabelValue() {
+  return (
+    <Slider defaultValue={50}>
+      <div className="mb-2 flex items-center justify-between gap-1">
+        <Label className="text-sm font-medium">Opacity</Label>
+        <SliderValue />
+      </div>
+    </Slider>
+  )
+}

package/registry/default/examples/switch-card.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+
+import { Label } from "@/registry/default/ui/label"
+import { Switch } from "@/registry/default/ui/switch"
+
+export default function SwitchCardDemo() {
+  const id = React.useId()
+
+  return (
+    <Label
+      htmlFor={id}
+      className="flex items-center gap-6 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50"
+    >
+      <div className="flex flex-col gap-1">
+        <p className="text-sm leading-4">Enable notifications</p>
+        <p className="text-xs text-muted-foreground">
+          You can enable or disable notifications at any time.
+        </p>
+      </div>
+      <Switch id={id} defaultChecked />
+    </Label>
+  )
+}

package/registry/default/examples/switch-demo.tsx

@@ -0,0 +1,11 @@
+import { Label } from "@/registry/default/ui/label"
+import { Switch } from "@/registry/default/ui/switch"
+
+export default function SwitchWithLabel() {
+  return (
+    <Label>
+      <Switch />
+      Marketing emails
+    </Label>
+  )
+}

package/registry/default/examples/switch-disabled.tsx

@@ -0,0 +1,11 @@
+import { Label } from "@/registry/default/ui/label"
+import { Switch } from "@/registry/default/ui/switch"
+
+export default function SwitchWithLabel() {
+  return (
+    <Label>
+      <Switch disabled />
+      Marketing emails
+    </Label>
+  )
+}

package/registry/default/examples/switch-form.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import { Field, FieldLabel } from "@/registry/default/ui/field"
+import { Form } from "@/registry/default/ui/form"
+import { Switch } from "@/registry/default/ui/switch"
+
+export default function SwitchFormDemo() {
+  const [loading, setLoading] = React.useState(false)
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    setLoading(true)
+    await new Promise((r) => setTimeout(r, 800))
+    setLoading(false)
+    console.log(formData.get("marketing"))
+
+    const enabled = formData.get("marketing")
+    alert(`Marketing emails: ${enabled}`)
+  }
+
+  return (
+    <Form onSubmit={onSubmit} className="grid w-auto gap-4">
+      <Field name="marketing">
+        <FieldLabel>
+          <Switch name="marketing" defaultChecked disabled={loading} />
+          Enable marketing emails
+        </FieldLabel>
+      </Field>
+      <Button type="submit" disabled={loading}>
+        Submit
+      </Button>
+    </Form>
+  )
+}

package/registry/default/examples/switch-privacy-mode.tsx

@@ -0,0 +1,12 @@
+import { LockIcon } from "lucide-react"
+
+import { Switch } from "@/registry/default/ui/switch"
+
+export default function SwitchPrivacyMode() {
+  return (
+    <label className="flex max-w-sm items-center justify-between gap-6 rounded-xl border p-4">
+      <span className="flex items-center gap-3 text-sm font-medium"><LockIcon className="size-4 text-muted-foreground" /> Private workspace</span>
+      <Switch defaultChecked />
+    </label>
+  )
+}

package/registry/default/examples/switch-with-description.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+
+import { Label } from "@/registry/default/ui/label"
+import { Switch } from "@/registry/default/ui/switch"
+
+export default function SwitchWithDescriptionDemo() {
+  const id = React.useId()
+
+  return (
+    <div className="flex items-start gap-2">
+      <Switch id={id} defaultChecked />
+      <div className="flex flex-col gap-1">
+        <Label htmlFor={id}>Marketing emails</Label>
+        <p className="text-xs text-muted-foreground">
+          By enabling marketing emails, you agree to receive emails.
+        </p>
+      </div>
+    </div>
+  )
+}