love-ui 1.2.12 → 1.2.14

package/public/r/comp-522.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-522",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-522.tsx",
+      "content": "import {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [\n  {\n    step: 1,\n    title: \"Step One\",\n    description: \"Desc for step one\",\n  },\n  {\n    step: 2,\n    title: \"Step Two\",\n    description: \"Desc for step two\",\n  },\n  {\n    step: 3,\n    title: \"Step Three\",\n    description: \"Desc for step three\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map(({ step, title, description }) => (\n          <StepperItem\n            key={step}\n            step={step}\n            className=\"relative flex-1 flex-col!\"\n          >\n            <StepperTrigger className=\"flex-col gap-3 rounded\">\n              <StepperIndicator />\n              <div className=\"space-y-0.5 px-2\">\n                <StepperTitle>{title}</StepperTitle>\n                <StepperDescription className=\"max-sm:hidden\">\n                  {description}\n                </StepperDescription>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"absolute inset-x-0 top-3 left-[calc(50%+0.75rem+0.125rem)] -order-1 m-0 -translate-y-1/2 group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Stepper with titles and descriptions\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-523.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-523",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-523.tsx",
+      "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [\n  {\n    step: 1,\n    title: \"Step One\",\n  },\n  {\n    step: 2,\n    title: \"Step Two\",\n  },\n  {\n    step: 3,\n    title: \"Step Three\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map(({ step, title }) => (\n          <StepperItem\n            key={step}\n            step={step}\n            className=\"not-last:flex-1 max-md:items-start\"\n          >\n            <StepperTrigger className=\"rounded max-md:flex-col\">\n              <StepperIndicator />\n              <div className=\"text-center md:text-left\">\n                <StepperTitle>{title}</StepperTitle>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"max-md:mt-3.5 md:mx-4\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Stepper with inline titles\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-524.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-524",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-524.tsx",
+      "content": "import {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [\n  {\n    step: 1,\n    title: \"Step One\",\n    description: \"Desc for step one\",\n  },\n  {\n    step: 2,\n    title: \"Step Two\",\n    description: \"Desc for step two\",\n  },\n  {\n    step: 3,\n    title: \"Step Three\",\n    description: \"Desc for step three\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map(({ step, title, description }) => (\n          <StepperItem\n            key={step}\n            step={step}\n            className=\"not-last:flex-1 max-md:items-start\"\n          >\n            <StepperTrigger className=\"rounded max-md:flex-col\">\n              <StepperIndicator />\n              <div className=\"text-center md:text-left\">\n                <StepperTitle>{title}</StepperTitle>\n                <StepperDescription className=\"max-sm:hidden\">\n                  {description}\n                </StepperDescription>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"max-md:mt-3.5 md:mx-4\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Stepper with inline titles and descriptions\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-525.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-525",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-525.tsx",
+      "content": "import {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [\n  {\n    step: 1,\n    title: \"Step One\",\n    description: \"Desc for step one\",\n  },\n  {\n    step: 2,\n    title: \"Step Two\",\n    description: \"Desc for step two\",\n  },\n  {\n    step: 3,\n    title: \"Step Three\",\n    description: \"Desc for step three\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map(({ step, title, description }) => (\n          <StepperItem\n            key={step}\n            step={step}\n            className=\"not-last:flex-1 max-md:items-start\"\n          >\n            <StepperTrigger className=\"gap-4 rounded max-md:flex-col\">\n              <StepperIndicator />\n              <div className=\"text-center md:-order-1 md:text-left\">\n                <StepperTitle>{title}</StepperTitle>\n                <StepperDescription className=\"max-sm:hidden\">\n                  {description}\n                </StepperDescription>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"max-md:mt-3.5 md:mx-4\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Stepper with inline titles and descriptions\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-526.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-526",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-526.tsx",
+      "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [1, 2, 3, 4]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2} orientation=\"vertical\">\n        {steps.map((step) => (\n          <StepperItem key={step} step={step} className=\"not-last:flex-1\">\n            <StepperTrigger>\n              <StepperIndicator />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Vertical stepper with numbers and checkmarks\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper",
+      "vertical stepper"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-527.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-527",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-527.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [1, 2, 3, 4]\n\nexport default function Component() {\n  const [currentStep, setCurrentStep] = useState(1)\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper\n        value={currentStep}\n        onValueChange={setCurrentStep}\n        orientation=\"vertical\"\n      >\n        {steps.map((step) => (\n          <StepperItem key={step} step={step} className=\"not-last:flex-1\">\n            <StepperTrigger asChild>\n              <StepperIndicator />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <div className=\"flex justify-center space-x-4\">\n        <Button\n          variant=\"outline\"\n          className=\"w-32\"\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          disabled={currentStep === 1}\n        >\n          Prev step\n        </Button>\n        <Button\n          variant=\"outline\"\n          className=\"w-32\"\n          onClick={() => setCurrentStep((prev) => prev + 1)}\n          disabled={currentStep > steps.length}\n        >\n          Next step\n        </Button>\n      </div>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Controlled vertical stepper with checkmarks\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper",
+      "vertical stepper"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-528.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-528",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-528.tsx",
+      "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [\n  {\n    step: 1,\n    title: \"Step One\",\n  },\n  {\n    step: 2,\n    title: \"Step Two\",\n  },\n  {\n    step: 3,\n    title: \"Step Three\",\n  },\n  {\n    step: 4,\n    title: \"Step Four\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2} orientation=\"vertical\">\n        {steps.map(({ step, title }) => (\n          <StepperItem\n            key={step}\n            step={step}\n            className=\"relative items-start not-last:flex-1\"\n          >\n            <StepperTrigger className=\"items-start rounded pb-12 last:pb-0\">\n              <StepperIndicator />\n              <div className=\"mt-0.5 px-2 text-left\">\n                <StepperTitle>{title}</StepperTitle>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"absolute inset-y-0 top-[calc(1.5rem+0.125rem)] left-3 -order-1 m-0 -translate-x-1/2 group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none group-data-[orientation=vertical]/stepper:h-[calc(100%-1.5rem-0.25rem)]\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Vertical stepper with inline titles\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper",
+      "vertical stepper"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-529.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-529",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-529.tsx",
+      "content": "import {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [\n  {\n    step: 1,\n    title: \"Step One\",\n    description: \"Desc for step one\",\n  },\n  {\n    step: 2,\n    title: \"Step Two\",\n    description: \"Desc for step two\",\n  },\n  {\n    step: 3,\n    title: \"Step Three\",\n    description: \"Desc for step three\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2} orientation=\"vertical\">\n        {steps.map(({ step, title, description }) => (\n          <StepperItem\n            key={step}\n            step={step}\n            className=\"relative items-start not-last:flex-1\"\n          >\n            <StepperTrigger className=\"items-start rounded pb-12 last:pb-0\">\n              <StepperIndicator />\n              <div className=\"mt-0.5 space-y-0.5 px-2 text-left\">\n                <StepperTitle>{title}</StepperTitle>\n                <StepperDescription>{description}</StepperDescription>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"absolute inset-y-0 top-[calc(1.5rem+0.125rem)] left-3 -order-1 m-0 -translate-x-1/2 group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none group-data-[orientation=vertical]/stepper:h-[calc(100%-1.5rem-0.25rem)]\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Vertical stepper with inline titles and descriptions\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper",
+      "vertical stepper"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-53.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-53",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/tooltip.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-53.tsx",
+      "content": "\"use client\"\n\nimport { useId, useRef, useState } from \"react\"\nimport { CheckIcon, CopyIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/building-blocks/default/ui/tooltip\"\n\nexport default function Component() {\n  const id = useId()\n  const [copied, setCopied] = useState<boolean>(false)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const handleCopy = () => {\n    if (inputRef.current) {\n      navigator.clipboard.writeText(inputRef.current.value)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 1500)\n    }\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Copy to clipboard</Label>\n      <div className=\"relative\">\n        <Input\n          ref={inputRef}\n          id={id}\n          className=\"pe-9\"\n          type=\"text\"\n          defaultValue=\"pnpm install origin-ui\"\n          readOnly\n        />\n        <TooltipProvider delayDuration={0}>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <button\n                onClick={handleCopy}\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 transition-[color,box-shadow] outline-none hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n                aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n                disabled={copied}\n              >\n                <div\n                  className={cn(\n                    \"transition-all\",\n                    copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\"\n                  )}\n                >\n                  <CheckIcon\n                    className=\"stroke-emerald-500\"\n                    size={16}\n                    aria-hidden=\"true\"\n                  />\n                </div>\n                <div\n                  className={cn(\n                    \"absolute transition-all\",\n                    copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-100\"\n                  )}\n                >\n                  <CopyIcon size={16} aria-hidden=\"true\" />\n                </div>\n              </button>\n            </TooltipTrigger>\n            <TooltipContent className=\"px-2 py-1 text-xs\">\n              Copy to clipboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "copy"
+    ]
+  }
+}

package/public/r/comp-530.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-530",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-530.tsx",
+      "content": "import {\n  Timeline,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items = [\n  {\n    id: 1,\n    date: \"Mar 15, 2024\",\n    title: \"Project Kickoff\",\n    description:\n      \"Initial team meeting and project scope definition. Established key milestones and resource allocation.\",\n  },\n  {\n    id: 2,\n    date: \"Mar 22, 2024\",\n    title: \"Design Phase\",\n    description:\n      \"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\",\n  },\n  {\n    id: 3,\n    date: \"Apr 5, 2024\",\n    title: \"Development Sprint\",\n    description:\n      \"Backend API implementation and frontend component development in progress.\",\n  },\n  {\n    id: 4,\n    date: \"Apr 19, 2024\",\n    title: \"Testing & Deployment\",\n    description:\n      \"Quality assurance testing, performance optimization, and production deployment preparation.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem key={item.id} step={item.id}>\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineTitle className=\"-mt-0.5\">{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline",
+      "vertical timeline"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-531.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-531",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-531.tsx",
+      "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items = [\n  {\n    id: 1,\n    date: \"Mar 15, 2024\",\n    title: \"Project Kickoff\",\n    description:\n      \"Initial team meeting and project scope definition. Established key milestones and resource allocation.\",\n  },\n  {\n    id: 2,\n    date: \"Mar 22, 2024\",\n    title: \"Design Phase\",\n    description:\n      \"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\",\n  },\n  {\n    id: 3,\n    date: \"Apr 5, 2024\",\n    title: \"Development Sprint\",\n    description:\n      \"Backend API implementation and frontend component development in progress.\",\n  },\n  {\n    id: 4,\n    date: \"Apr 19, 2024\",\n    title: \"Testing & Deployment\",\n    description:\n      \"Quality assurance testing, performance optimization, and production deployment preparation.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem\n          key={item.id}\n          step={item.id}\n          className=\"sm:group-data-[orientation=vertical]/timeline:ms-32\"\n        >\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineDate className=\"sm:group-data-[orientation=vertical]/timeline:absolute sm:group-data-[orientation=vertical]/timeline:-left-32 sm:group-data-[orientation=vertical]/timeline:w-20 sm:group-data-[orientation=vertical]/timeline:text-right\">\n              {item.date}\n            </TimelineDate>\n            <TimelineTitle className=\"sm:-mt-0.5\">{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline",
+      "vertical timeline"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-532.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-532",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-532.tsx",
+      "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items = [\n  {\n    id: 1,\n    date: \"Mar 15, 2024\",\n    title: \"Project Kickoff\",\n    description:\n      \"Initial team meeting and project scope definition. Established key milestones and resource allocation.\",\n  },\n  {\n    id: 2,\n    date: \"Mar 22, 2024\",\n    title: \"Design Phase\",\n    description:\n      \"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\",\n  },\n  {\n    id: 3,\n    date: \"Apr 5, 2024\",\n    title: \"Development Sprint\",\n    description:\n      \"Backend API implementation and frontend component development in progress.\",\n  },\n  {\n    id: 4,\n    date: \"Apr 19, 2024\",\n    title: \"Testing & Deployment\",\n    description:\n      \"Quality assurance testing, performance optimization, and production deployment preparation.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem key={item.id} step={item.id}>\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineDate>{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline",
+      "vertical timeline"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-533.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-533",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-533.tsx",
+      "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items = [\n  {\n    id: 1,\n    date: \"15 minutes ago\",\n    title: \"Pull Request Submitted\",\n    description:\n      \"Submitted PR #342 with new feature implementation. Waiting for code review from team leads.\",\n  },\n  {\n    id: 2,\n    date: \"10 minutes ago\",\n    title: \"CI Pipeline Started\",\n    description:\n      \"Automated tests and build process initiated. Running unit tests and code quality checks.\",\n  },\n  {\n    id: 3,\n    date: \"5 minutes ago\",\n    title: \"Code Review Feedback\",\n    description:\n      \"Received comments on PR. Minor adjustments needed in error handling and documentation.\",\n  },\n  {\n    id: 4,\n    title: \"Changes Pushed\",\n    description:\n      \"Implemented requested changes and pushed updates to feature branch. Awaiting final approval.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem key={item.id} step={item.id}>\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineTitle className=\"-mt-0.5\">{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n          <TimelineContent>\n            {item.description}\n            <TimelineDate className=\"mt-2 mb-0\">{item.date}</TimelineDate>\n          </TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline",
+      "vertical timeline"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-534.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-534",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-534.tsx",
+      "content": "import { CheckIcon } from \"lucide-react\"\n\nimport {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items = [\n  {\n    id: 1,\n    date: \"Mar 15, 2024\",\n    title: \"Project Kickoff\",\n    description:\n      \"Initial team meeting and project scope definition. Established key milestones and resource allocation.\",\n  },\n  {\n    id: 2,\n    date: \"Mar 22, 2024\",\n    title: \"Design Phase\",\n    description:\n      \"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\",\n  },\n  {\n    id: 3,\n    date: \"Apr 5, 2024\",\n    title: \"Development Sprint\",\n    description:\n      \"Backend API implementation and frontend component development in progress.\",\n  },\n  {\n    id: 4,\n    date: \"Apr 19, 2024\",\n    title: \"Testing & Deployment\",\n    description:\n      \"Quality assurance testing, performance optimization, and production deployment preparation.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem\n          key={item.id}\n          step={item.id}\n          className=\"group-data-[orientation=vertical]/timeline:ms-10\"\n        >\n          <TimelineHeader>\n            <TimelineSeparator className=\"group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5\" />\n            <TimelineDate>{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator className=\"flex size-6 items-center justify-center group-data-completed/timeline-item:border-none group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground group-data-[orientation=vertical]/timeline:-left-7\">\n              <CheckIcon\n                className=\"group-not-data-completed/timeline-item:hidden\"\n                size={16}\n              />\n            </TimelineIndicator>\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline",
+      "vertical timeline"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-535.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-535",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-535.tsx",
+      "content": "import { GitCompare, GitFork, GitMerge, GitPullRequest } from \"lucide-react\"\n\nimport {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items = [\n  {\n    id: 1,\n    date: \"15 minutes ago\",\n    title: \"Forked Repository\",\n    description:\n      \"Forked the repository to create a new branch for development.\",\n    icon: GitFork,\n  },\n  {\n    id: 2,\n    date: \"10 minutes ago\",\n    title: \"Pull Request Submitted\",\n    description:\n      \"Submitted PR #342 with new feature implementation. Waiting for code review from team leads.\",\n    icon: GitPullRequest,\n  },\n  {\n    id: 3,\n    date: \"5 minutes ago\",\n    title: \"Comparing Branches\",\n    description:\n      \"Received comments on PR. Minor adjustments needed in error handling and documentation.\",\n    icon: GitCompare,\n  },\n  {\n    id: 4,\n    title: \"Merged Branch\",\n    description:\n      \"Merged the feature branch into the main branch. Ready for deployment.\",\n    icon: GitMerge,\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem\n          key={item.id}\n          step={item.id}\n          className=\"group-data-[orientation=vertical]/timeline:ms-10\"\n        >\n          <TimelineHeader>\n            <TimelineSeparator className=\"group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5\" />\n            <TimelineTitle className=\"mt-0.5\">{item.title}</TimelineTitle>\n            <TimelineIndicator className=\"flex size-6 items-center justify-center border-none bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground group-data-[orientation=vertical]/timeline:-left-7\">\n              <item.icon size={14} />\n            </TimelineIndicator>\n          </TimelineHeader>\n          <TimelineContent>\n            {item.description}\n            <TimelineDate className=\"mt-2 mb-0\">{item.date}</TimelineDate>\n          </TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline",
+      "vertical timeline"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-536.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-536",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-536.tsx",
+      "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/building-blocks/default/ui/timeline\"\nconst items = [\n  {\n    id: 1,\n    date: \"15 minutes ago\",\n    title: \"Ian Schroeter\",\n    action: \"opened a new issue\",\n    description:\n      \"I'm having trouble with the new component library. It's not rendering properly.\",\n    image: \"https://i.pravatar.cc/160?img=8\",\n  },\n  {\n    id: 2,\n    date: \"10 minutes ago\",\n    title: \"Connor Love\",\n    action: \"commented on\",\n    description:\n      \"Hey Ian, I'm having trouble with the new component library. It's not rendering properly.\",\n    image: \"https://i.pravatar.cc/160?img=9\",\n  },\n  {\n    id: 3,\n    date: \"5 minutes ago\",\n    title: \"Nathan Wickersham\",\n    action: \"assigned you to\",\n    description:\n      \"The new component library is not rendering properly. Can you take a look?\",\n    image: \"https://i.pravatar.cc/160?img=10\",\n  },\n  {\n    id: 4,\n    date: \"2 minutes ago\",\n    title: \"Thomas Raklovits\",\n    action: \"closed the issue\",\n    description: \"The issue has been fixed. Please review the changes.\",\n    image: \"https://i.pravatar.cc/160?img=12\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline>\n      {items.map((item) => (\n        <TimelineItem\n          key={item.id}\n          step={item.id}\n          className=\"group-data-[orientation=vertical]/timeline:ms-10 group-data-[orientation=vertical]/timeline:not-last:pb-8\"\n        >\n          <TimelineHeader>\n            <TimelineSeparator className=\"group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5\" />\n            <TimelineTitle className=\"mt-0.5\">\n              {item.title}{\" \"}\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                {item.action}\n              </span>\n            </TimelineTitle>\n            <TimelineIndicator className=\"flex size-6 items-center justify-center border-none bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground group-data-[orientation=vertical]/timeline:-left-7\">\n              <img\n                src={item.image}\n                alt={item.title}\n                className=\"size-6 rounded-full\"\n              />\n            </TimelineIndicator>\n          </TimelineHeader>\n          <TimelineContent className=\"mt-2 rounded-lg border px-4 py-3 text-foreground\">\n            {item.description}\n            <TimelineDate className=\"mt-1 mb-0\">{item.date}</TimelineDate>\n          </TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline",
+      "vertical timeline"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-537.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-537",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-537.tsx",
+      "content": "import {\n  Timeline,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items = [\n  {\n    id: 1,\n    date: \"Mar 15, 2024\",\n    title: \"Project Kickoff\",\n  },\n  {\n    id: 2,\n    date: \"Mar 22, 2024\",\n    title: \"Design Phase\",\n  },\n  {\n    id: 3,\n    date: \"Apr 5, 2024\",\n    title: \"Development Sprint\",\n  },\n  {\n    id: 4,\n    date: \"Apr 19, 2024\",\n    title: \"Testing & Deployment\",\n  },\n  {\n    id: 5,\n    date: \"May 3, 2024\",\n    title: \"User Training\",\n  },\n  {\n    id: 6,\n    date: \"May 17, 2024\",\n    title: \"Project Handover\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem\n          key={item.id}\n          step={item.id}\n          className=\"w-[calc(50%-1.5rem)] odd:ms-auto even:text-right even:group-data-[orientation=vertical]/timeline:ms-0 even:group-data-[orientation=vertical]/timeline:me-8 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:-right-6 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:left-auto even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:translate-x-1/2 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:-right-6 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:left-auto even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:translate-x-1/2\"\n        >\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineDate>{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline",
+      "vertical timeline"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-538.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-538",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-538.tsx",
+      "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineItem,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items = [\n  {\n    id: 1,\n    date: new Date(\"2024-01-09T10:55:00\"),\n    description: \"System backup completed successfully.\",\n  },\n  {\n    id: 2,\n    date: new Date(\"2024-01-09T10:50:00\"),\n    description:\n      \"User authentication service restarted due to configuration update.\",\n  },\n  {\n    id: 3,\n    date: new Date(\"2024-01-09T10:45:00\"),\n    description: \"Warning: High CPU usage detected on worker node-03.\",\n  },\n  {\n    id: 4,\n    date: new Date(\"2024-01-09T10:40:00\"),\n    description: \"New deployment initiated for api-service v2.1.0.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline className=\"divide-y rounded-lg border\">\n      {items.map((item) => (\n        <TimelineItem key={item.id} step={item.id} className=\"m-0! px-4! py-3!\">\n          <TimelineContent className=\"text-foreground\">\n            {item.description}\n            <TimelineDate className=\"mt-1\">\n              {item.date.toLocaleDateString(\"en-US\", {\n                year: \"numeric\",\n                month: \"long\",\n                day: \"numeric\",\n              })}{\" \"}\n              at{\" \"}\n              {item.date.toLocaleTimeString(\"en-US\", {\n                hour: \"numeric\",\n                minute: \"2-digit\",\n                hour12: true,\n              })}\n            </TimelineDate>\n          </TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline",
+      "vertical timeline"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-539.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-539",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-539.tsx",
+      "content": "import {\n  BookOpenIcon,\n  LucideIcon,\n  MessageCircleIcon,\n  PencilIcon,\n  PlusIcon,\n} from \"lucide-react\"\nimport {\n  Timeline,\n  TimelineContent,\n  TimelineItem,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items: {\n  id: number\n  user: string\n  image: string\n  action: ActionType\n  date: Date\n}[] = [\n  {\n    id: 1,\n    user: \"Connor\",\n    image: \"https://i.pravatar.cc/160?img=9\",\n    action: \"post\",\n    date: new Date(Date.now() - 59000), // 59 seconds ago\n  },\n  {\n    id: 2,\n    user: \"Connor\",\n    image: \"https://i.pravatar.cc/160?img=9\",\n    action: \"reply\",\n    date: new Date(Date.now() - 180000), // 3 minutes ago\n  },\n  {\n    id: 3,\n    user: \"Connor\",\n    image: \"https://i.pravatar.cc/160?img=9\",\n    action: \"edit\",\n    date: new Date(Date.now() - 300000), // 5 minutes ago\n  },\n  {\n    id: 4,\n    user: \"Connor\",\n    image: \"https://i.pravatar.cc/160?img=9\",\n    action: \"create\",\n    date: new Date(Date.now() - 600000), // 10 minutes ago\n  },\n]\n\ntype ActionType = \"post\" | \"reply\" | \"edit\" | \"create\"\n\nfunction getActionIcon(action: ActionType): LucideIcon {\n  const icons: Record<ActionType, LucideIcon> = {\n    post: BookOpenIcon,\n    reply: MessageCircleIcon,\n    edit: PencilIcon,\n    create: PlusIcon,\n  }\n  return icons[action]\n}\n\nfunction getActionText(action: ActionType): string {\n  const texts: Record<ActionType, string> = {\n    post: \"wrote a new post\",\n    reply: \"replied to a comment\",\n    edit: \"edited a post\",\n    create: \"created a new project\",\n  }\n  return texts[action]\n}\n\nfunction getRelativeTimeString(date: Date): string {\n  const now = new Date()\n  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)\n\n  if (diffInSeconds < 60) {\n    return `${diffInSeconds} seconds ago`\n  } else if (diffInSeconds < 3600) {\n    const minutes = Math.floor(diffInSeconds / 60)\n    return `${minutes} ${minutes === 1 ? \"minute\" : \"minutes\"} ago`\n  } else if (diffInSeconds < 86400) {\n    const hours = Math.floor(diffInSeconds / 3600)\n    return `${hours} ${hours === 1 ? \"hour\" : \"hours\"} ago`\n  } else {\n    const days = Math.floor(diffInSeconds / 86400)\n    return `${days} ${days === 1 ? \"day\" : \"days\"} ago`\n  }\n}\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"text-xs font-medium text-muted-foreground\">Activity</div>\n      <Timeline>\n        {items.map((item) => {\n          const ActionIcon = getActionIcon(item.action)\n          return (\n            <TimelineItem\n              key={item.id}\n              step={item.id}\n              className=\"m-0! flex-row items-center gap-3 py-2.5!\"\n            >\n              <ActionIcon className=\"text-muted-foreground/80\" size={16} />\n              <img\n                src={item.image}\n                alt={item.user}\n                className=\"size-6 rounded-full\"\n              />\n              <TimelineContent className=\"text-foreground\">\n                <a className=\"font-medium hover:underline\" href=\"#\">\n                  {item.user}\n                </a>\n                <span className=\"font-normal\">\n                  {\" \"}\n                  {getActionText(item.action)}{\" \"}\n                  <a className=\"hover:underline\" href=\"#\">\n                    {getRelativeTimeString(item.date)}\n                  </a>\n                </span>\n              </TimelineContent>\n            </TimelineItem>\n          )\n        })}\n      </Timeline>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline",
+      "vertical timeline"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-54.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-54",
+  "type": "registry:component",
+  "dependencies": [
+    "use-mask-input"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-54.tsx",
+      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport { withMask } from \"use-mask-input\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with mask</Label>\n      <Input\n        id={id}\n        placeholder=\"AB12 CDE\"\n        type=\"text\"\n        ref={(input) => {\n          if (input) {\n            withMask(\"AA99 AAA\", {\n              placeholder: \"\",\n              showMaskOnHover: false,\n            })(input)\n          }\n        }}\n      />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/eduardoborges/use-mask-input\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          use-mask-input\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "mask"
+    ]
+  }
+}

package/public/r/comp-540.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-540",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-540.tsx",
+      "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items = [\n  {\n    id: 1,\n    date: \"Mar 15, 2024\",\n    title: \"Project Kickoff\",\n    description: \"Initial team meeting.\",\n  },\n  {\n    id: 2,\n    date: \"Mar 22, 2024\",\n    title: \"Design Phase\",\n    description: \"Completed wireframes.\",\n  },\n  {\n    id: 3,\n    date: \"Apr 5, 2024\",\n    title: \"Development Sprint\",\n    description: \"Backend development.\",\n  },\n  {\n    id: 4,\n    date: \"Apr 19, 2024\",\n    title: \"Testing & Deployment\",\n    description: \"Performance optimization.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3} orientation=\"horizontal\">\n      {items.map((item) => (\n        <TimelineItem key={item.id} step={item.id}>\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineDate>{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-541.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-541",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/timeline.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-541.tsx",
+      "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/building-blocks/default/ui/timeline\"\n\nconst items = [\n  {\n    id: 1,\n    date: \"Mar 15, 2024\",\n    title: \"Project Kickoff\",\n    description: \"Initial team meeting.\",\n  },\n  {\n    id: 2,\n    date: \"Mar 22, 2024\",\n    title: \"Design Phase\",\n    description: \"Completed wireframes.\",\n  },\n  {\n    id: 3,\n    date: \"Apr 5, 2024\",\n    title: \"Development Sprint\",\n    description: \"Backend development.\",\n  },\n  {\n    id: 4,\n    date: \"Apr 19, 2024\",\n    title: \"Testing & Deployment\",\n    description: \"Performance optimization.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3} orientation=\"horizontal\">\n      {items.map((item) => (\n        <TimelineItem\n          key={item.id}\n          step={item.id}\n          className=\"group-data-[orientation=horizontal]/timeline:mt-0\"\n        >\n          <TimelineHeader>\n            <TimelineSeparator className=\"group-data-[orientation=horizontal]/timeline:top-8\" />\n            <TimelineDate className=\"mb-10\">{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator className=\"group-data-[orientation=horizontal]/timeline:top-8\" />\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "timeline"
+    ],
+    "colSpan": 3
+  }
+}