love-ui 1.0.3 → 1.0.4

package/README.md

@@ -0,0 +1,22 @@
+# love-ui
+
+Command line utility and component registry bundles for LoveUI.
+
+## Usage
+
+Install the CLI globally or run it with `npx`:
+
+```bash
+npx love-ui add button
+```
+
+The CLI resolves component definitions from the LoveUI registry, shadcn-style, and pipes them straight into `shadcn add`. Source packages are shipped alongside the CLI under the `packages/` directory so you can inspect or copy the raw files if you prefer to scaffold manually.
+
+## Development
+
+```bash
+bun install
+bun run build
+```
+
+The build script bundles the CLI into `dist/` and copies the component packages into `packages/`. Running `npm publish --access public` afterwards pushes both the CLI binary and the template sources to npm.

package/dist/index.cjs

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-"use strict";var t=require("child_process"),o=process.argv.slice(2);(o.length<2||o[0]!=="add")&&(console.log("Usage: npx loveui add [...packages]"),process.exit(1));var r=o.slice(1);for(let e of r){if(!e.trim())continue;console.log(`Adding ${e} component...`);let n=`npx -y shadcn@latest add ${(e==="ai"?new URL("all.json","https://registry.ai-sdk.dev/"):new URL(`r/${e}.json`,"https://www.loveui.dev/")).toString()}`,s=(0,t.spawnSync)(n,{stdio:"inherit",shell:!0});s.error?(console.error(`Failed to add ${e}:`,s.error.message),process.exit(1)):s.status!==0&&(console.error(`Command failed with exit code ${s.status}`),process.exit(1))}
+"use strict";var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var f=(e,o)=>{for(var s in o)i(e,s,{get:o[s],enumerable:!0})},m=(e,o,s,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of p(o))!u.call(e,t)&&t!==s&&i(e,t,{get:()=>o[t],enumerable:!(n=d(o,t))||n.enumerable});return e};var g=e=>m(i({},"__esModule",{value:!0}),e);var w={};f(w,{run:()=>l});module.exports=g(w);var a=require("child_process"),c=require("url"),x={};function l(e=process.argv.slice(2)){(e.length<2||e[0]!=="add")&&(console.log("Usage: npx love-ui add [...packages]"),process.exit(1));let o=e.slice(1);for(let s of o){if(!s.trim())continue;console.log(`Adding ${s} component...`);let t=`npx -y shadcn@latest add ${(s==="ai"?new URL("all.json","https://registry.ai-sdk.dev/"):new URL(`r/${s}.json`,"https://www.loveui.dev/")).toString()}`,r=(0,a.spawnSync)(t,{stdio:"inherit",shell:!0});r.error?(console.error(`Failed to add ${s}:`,r.error.message),process.exit(1)):r.status!==0&&(console.error(`Command failed with exit code ${r.status}`),process.exit(1))}}var h=(()=>{let e=process.argv[1];if(!e)return!1;try{return(0,c.pathToFileURL)(e).href===x.url}catch{return!1}})();h&&l();0&&(module.exports={run});

package/dist/index.d.cts

@@ -1 +1,4 @@
 #!/usr/bin/env node
+declare function run(argv?: string[]): void;
+
+export { run };

package/dist/index.d.ts

@@ -1 +1,4 @@
 #!/usr/bin/env node
+declare function run(argv?: string[]): void;
+
+export { run };

package/dist/index.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import{spawnSync as n}from"child_process";var o=process.argv.slice(2);(o.length<2||o[0]!=="add")&&(console.log("Usage: npx loveui add [...packages]"),process.exit(1));var r=o.slice(1);for(let e of r){if(!e.trim())continue;console.log(`Adding ${e} component...`);let t=`npx -y shadcn@latest add ${(e==="ai"?new URL("all.json","https://registry.ai-sdk.dev/"):new URL(`r/${e}.json`,"https://www.loveui.dev/")).toString()}`,s=n(t,{stdio:"inherit",shell:!0});s.error?(console.error(`Failed to add ${e}:`,s.error.message),process.exit(1)):s.status!==0&&(console.error(`Command failed with exit code ${s.status}`),process.exit(1))}
+import{spawnSync as n}from"child_process";import{pathToFileURL as i}from"url";function a(e=process.argv.slice(2)){(e.length<2||e[0]!=="add")&&(console.log("Usage: npx love-ui add [...packages]"),process.exit(1));let t=e.slice(1);for(let o of t){if(!o.trim())continue;console.log(`Adding ${o} component...`);let r=`npx -y shadcn@latest add ${(o==="ai"?new URL("all.json","https://registry.ai-sdk.dev/"):new URL(`r/${o}.json`,"https://www.loveui.dev/")).toString()}`,s=n(r,{stdio:"inherit",shell:!0});s.error?(console.error(`Failed to add ${o}:`,s.error.message),process.exit(1)):s.status!==0&&(console.error(`Command failed with exit code ${s.status}`),process.exit(1))}}var c=(()=>{let e=process.argv[1];if(!e)return!1;try{return i(e).href===import.meta.url}catch{return!1}})();c&&a();export{a as run};

package/package.json

@@ -1,18 +1,37 @@
 {
   "name": "love-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": false,
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "bin": {
-    "love-ui": "./dist/index.js"
+    "loveui": "dist/index.js",
+    "love-ui": "dist/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "packages",
+    "*.ts",
+    "*.tsx",
+    "*.css",
+    "*.mdx"
   ],
+  "main": "packages/love-ui/index.ts",
+  "types": "packages/love-ui/index.ts",
+  "exports": {
+    ".": {
+      "import": "./packages/love-ui/index.ts",
+      "require": "./packages/love-ui/index.ts"
+    },
+    "./lib/*": "./packages/love-ui/*",
+    "./components/*": "./packages/love-ui/components/*",
+    "./shadcn-ui/*": "./packages/shadcn-ui/*",
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "tsup",
-    "clean": "rimraf dist"
+    "postbuild": "node ./scripts/copy-packages.mjs",
+    "clean": "rimraf dist packages"
   },
   "devDependencies": {
     "@types/node": "^20.14.10",

package/packages/announcement/index.tsx

@@ -0,0 +1,53 @@
+import type { ComponentProps, HTMLAttributes } from "react";
+import { Badge } from "../ui/src/ui/badge";
+import { cn } from "../ui/src/lib/utils";
+
+export type AnnouncementProps = ComponentProps<typeof Badge> & {
+  themed?: boolean;
+};
+
+export const Announcement = ({
+  variant = "outline",
+  themed = false,
+  className,
+  ...props
+}: AnnouncementProps) => (
+  <Badge
+    className={cn(
+      "group max-w-full gap-2 rounded-full bg-background px-3 py-0.5 font-medium shadow-sm transition-all",
+      "hover:shadow-md",
+      themed && "announcement-themed border-foreground/5",
+      className
+    )}
+    variant={variant}
+    {...props}
+  />
+);
+
+export type AnnouncementTagProps = HTMLAttributes<HTMLDivElement>;
+
+export const AnnouncementTag = ({
+  className,
+  ...props
+}: AnnouncementTagProps) => (
+  <div
+    className={cn(
+      "-ml-2.5 shrink-0 truncate rounded-full bg-foreground/5 px-2.5 py-1 text-xs",
+      "group-[.announcement-themed]:bg-background/60",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type AnnouncementTitleProps = HTMLAttributes<HTMLDivElement>;
+
+export const AnnouncementTitle = ({
+  className,
+  ...props
+}: AnnouncementTitleProps) => (
+  <div
+    className={cn("flex items-center gap-1 truncate py-1", className)}
+    {...props}
+  />
+);

package/packages/announcement/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@loveui/announcement",
+  "description": "A compound badge designed to display an announcement.",
+  "version": "0.1.0",
+  "dependencies": {
+    "@loveui/shadcn-ui": "^0.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@loveui/typescript-config": "^0.1.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "files": [
+    "dist",
+    "*.ts",
+    "*.tsx",
+    "*.css",
+    "*.mdx"
+  ]
+}

package/packages/announcement/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@loveui/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@loveui/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/packages/avatar-stack/index.tsx

@@ -0,0 +1,51 @@
+import { Children, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export type AvatarStackProps = {
+  children: ReactNode;
+  className?: string;
+  animate?: boolean;
+  size?: number;
+};
+
+export const AvatarStack = ({
+  children,
+  className,
+  animate = false,
+  size = 40,
+  ...props
+}: AvatarStackProps) => (
+  <div
+    className={cn(
+      "-space-x-1 flex items-center",
+      animate && "hover:space-x-0 [&>*]:transition-all",
+      className
+    )}
+    {...props}
+  >
+    {Children.map(children, (child, index) => {
+      if (!child) {
+        return null;
+      }
+
+      return (
+        <div
+          className={cn(
+            "size-full shrink-0 overflow-hidden rounded-full",
+            '[&_[data-slot="avatar"]]:size-full',
+            className
+          )}
+          style={{
+            width: size,
+            height: size,
+            maskImage: index
+              ? `radial-gradient(circle ${size / 2}px at -${size / 4 + size / 10}px 50%, transparent 99%, white 100%)`
+              : "",
+          }}
+        >
+          {child}
+        </div>
+      );
+    })}
+  </div>
+);

package/packages/avatar-stack/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@loveui/avatar-stack",
+  "description": "Avatar Stack is a component that allows you to stack and overlap avatars.",
+  "version": "0.1.0",
+  "dependencies": {
+    "@loveui/shadcn-ui": "^0.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@loveui/typescript-config": "^0.1.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "files": [
+    "dist",
+    "*.ts",
+    "*.tsx",
+    "*.css",
+    "*.mdx"
+  ]
+}

package/packages/avatar-stack/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@loveui/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@loveui/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/packages/banner/index.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { type LucideIcon, XIcon } from "lucide-react";
+import {
+  type ComponentProps,
+  createContext,
+  type HTMLAttributes,
+  type MouseEventHandler,
+  useContext,
+} from "react";
+import { Button } from "../ui/src/ui/button";
+import { cn } from "../ui/src/lib/utils";
+
+type BannerContextProps = {
+  show: boolean;
+  setShow: (show: boolean) => void;
+};
+
+export const BannerContext = createContext<BannerContextProps>({
+  show: true,
+  setShow: () => {},
+});
+
+export type BannerProps = HTMLAttributes<HTMLDivElement> & {
+  visible?: boolean;
+  defaultVisible?: boolean;
+  onClose?: () => void;
+  inset?: boolean;
+};
+
+export const Banner = ({
+  children,
+  visible,
+  defaultVisible = true,
+  onClose,
+  className,
+  inset = false,
+  ...props
+}: BannerProps) => {
+  const [show, setShow] = useControllableState({
+    defaultProp: defaultVisible,
+    prop: visible,
+    onChange: onClose,
+  });
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <BannerContext.Provider value={{ show, setShow }}>
+      <div
+        className={cn(
+          "flex w-full items-center justify-between gap-2 bg-primary px-4 py-2 text-primary-foreground",
+          inset && "rounded-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </BannerContext.Provider>
+  );
+};
+
+export type BannerIconProps = HTMLAttributes<HTMLDivElement> & {
+  icon: LucideIcon;
+};
+
+export const BannerIcon = ({
+  icon: Icon,
+  className,
+  ...props
+}: BannerIconProps) => (
+  <div
+    className={cn(
+      "rounded-full border border-background/20 bg-background/10 p-1 shadow-sm",
+      className
+    )}
+    {...props}
+  >
+    <Icon size={16} />
+  </div>
+);
+
+export type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const BannerTitle = ({ className, ...props }: BannerTitleProps) => (
+  <p className={cn("flex-1 text-sm", className)} {...props} />
+);
+
+export type BannerActionProps = ComponentProps<typeof Button>;
+
+export const BannerAction = ({
+  variant = "outline",
+  size = "sm",
+  className,
+  ...props
+}: BannerActionProps) => (
+  <Button
+    className={cn(
+      "shrink-0 border-transparent bg-primary-foreground text-primary hover:bg-primary-foreground/90 hover:text-primary",
+      className
+    )}
+    size={size}
+    variant={variant}
+    {...props}
+  />
+);
+
+export type BannerCloseProps = ComponentProps<typeof Button>;
+
+export const BannerClose = ({
+  variant = "ghost",
+  size = "icon",
+  onClick,
+  className,
+  ...props
+}: BannerCloseProps) => {
+  const { setShow } = useContext(BannerContext);
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+    setShow(false);
+    onClick?.(e);
+  };
+
+  return (
+    <Button
+      className={cn(
+        "shrink-0 bg-transparent hover:bg-background/10 hover:text-background",
+        className
+      )}
+      onClick={handleClick}
+      size={size}
+      variant={variant}
+      {...props}
+    >
+      <XIcon size={18} />
+    </Button>
+  );
+};

package/packages/banner/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@loveui/banner",
+  "description": "A banner is a full-width component that can be used to show a message and action to the user.",
+  "version": "0.1.0",
+  "dependencies": {
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@loveui/shadcn-ui": "^0.1.0",
+    "lucide-react": "^0.545.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@loveui/typescript-config": "^0.1.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "typescript": "^5.9.3"
+  },
+  "files": [
+    "dist",
+    "*.ts",
+    "*.tsx",
+    "*.css",
+    "*.mdx"
+  ]
+}

package/packages/banner/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@loveui/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@loveui/*": ["../*"],
+      "@/components/*": ["../shadcn-ui/components/*"],
+      "@/lib/*": ["../shadcn-ui/lib/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}