snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
--- a/apps/v4/registry/bases/base/examples/spinner-example.tsx
+++ b/apps/v4/registry/bases/base/examples/spinner-example.tsx
@@ -0,0 +1,150 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/base/components/example"
+import { Badge } from "@/registry/bases/base/ui/badge"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/registry/bases/base/ui/empty"
+import { Field, FieldLabel } from "@/registry/bases/base/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/registry/bases/base/ui/input-group"
+import { Spinner } from "@/registry/bases/base/ui/spinner"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export default function SpinnerExample() {
+  return (
+    <ExampleWrapper>
+      <SpinnerBasic />
+      <SpinnerInButtons />
+      <SpinnerInBadges />
+      <SpinnerInInputGroup />
+      <SpinnerInEmpty />
+    </ExampleWrapper>
+  )
+}
+
+function SpinnerBasic() {
+  return (
+    <Example title="Basic">
+      <div className="flex items-center gap-6">
+        <Spinner />
+        <Spinner className="size-6" />
+      </div>
+    </Example>
+  )
+}
+
+function SpinnerInButtons() {
+  return (
+    <Example title="In Buttons">
+      <div className="flex flex-wrap items-center gap-4">
+        <Button>
+          <Spinner data-icon="inline-start" /> Submit
+        </Button>
+        <Button disabled>
+          <Spinner data-icon="inline-start" /> Disabled
+        </Button>
+        <Button variant="outline" disabled>
+          <Spinner data-icon="inline-start" /> Outline
+        </Button>
+        <Button variant="outline" size="icon" disabled>
+          <Spinner data-icon="inline-start" />
+          <span className="sr-only">Loading...</span>
+        </Button>
+      </div>
+    </Example>
+  )
+}
+
+function SpinnerInBadges() {
+  return (
+    <Example title="In Badges" className="items-center justify-center">
+      <div className="flex flex-wrap items-center justify-center gap-4">
+        <Badge>
+          <Spinner data-icon="inline-start" />
+          Badge
+        </Badge>
+        <Badge variant="secondary">
+          <Spinner data-icon="inline-start" />
+          Badge
+        </Badge>
+        <Badge variant="destructive">
+          <Spinner data-icon="inline-start" />
+          Badge
+        </Badge>
+        <Badge variant="outline">
+          <Spinner data-icon="inline-start" />
+          Badge
+        </Badge>
+      </div>
+    </Example>
+  )
+}
+
+function SpinnerInInputGroup() {
+  return (
+    <Example title="In Input Group">
+      <Field>
+        <FieldLabel htmlFor="input-group-spinner">Input Group</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-group-spinner" />
+          <InputGroupAddon>
+            <Spinner />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </Example>
+  )
+}
+
+function SpinnerInEmpty() {
+  return (
+    <Example title="In Empty State" containerClassName="lg:col-span-full">
+      <Empty className="min-h-[300px]">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <Spinner />
+          </EmptyMedia>
+          <EmptyTitle>No projects yet</EmptyTitle>
+          <EmptyDescription>
+            You haven&apos;t created any projects yet. Get started by creating
+            your first project.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <div className="flex gap-2">
+            <Button render={<a href="#" />} nativeButton={false}>
+              Create project
+            </Button>
+            <Button variant="outline">Import project</Button>
+          </div>
+          <Button
+            variant="link"
+            render={<a href="#" />}
+            nativeButton={false}
+            className="text-muted-foreground"
+          >
+            Learn more{" "}
+            <IconPlaceholder
+              lucide="ArrowRightIcon"
+              tabler="IconArrowRight"
+              hugeicons="ArrowRight02Icon"
+              phosphor="ArrowRightIcon"
+              remixicon="RiArrowRightLine"
+            />
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </Example>
+  )
+}