bopodev-ui 0.1.1

package/.turbo/turbo-lint.log

@@ -0,0 +1,4 @@
+
+> @bopo/ui@0.1.0 lint /Users/danielkrusenstrahle/Documents/Projects/Monorepo/BopoHQ/packages/ui
+> tsc -p tsconfig.json --noEmit
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,4 @@
+
+> bopodev-ui@0.1.1 typecheck /Users/danielkrusenstrahle/Documents/Projects/Monorepo/BopoHQ/packages/ui
+> tsc -p tsconfig.json --noEmit
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 BopoHQ contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "bopodev-ui",
+  "version": "0.1.1",
+  "license": "MIT",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "peerDependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json --emitDeclarationOnly",
+    "lint": "tsc -p tsconfig.json --noEmit",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}

package/src/components/button.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+import { uiStyles } from "../styles";
+
+const buttonVariants = cva(uiStyles.buttonBase, {
+  variants: {
+    variant: {
+      ghost: uiStyles.buttonGhost,
+      primary: uiStyles.buttonPrimary
+    }
+  },
+  defaultVariants: {
+    variant: "ghost"
+  }
+});
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, variant, ...props },
+  ref
+) {
+  return <button ref={ref} className={cn(buttonVariants({ variant }), className)} {...props} />;
+});
+
+Button.displayName = "Button";

package/src/components/card.tsx

@@ -0,0 +1,15 @@
+import type * as React from "react";
+import { cn } from "../lib/cn";
+import { uiStyles } from "../styles";
+
+export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn(uiStyles.card, className)} {...props} />;
+}
+
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn(uiStyles.cardHeader, className)} {...props} />;
+}
+
+export function CardBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn(uiStyles.cardBody, className)} {...props} />;
+}

package/src/components/input.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { uiStyles } from "../styles";
+
+export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(function Input(
+  { className, ...props },
+  ref
+) {
+  return <input ref={ref} className={cn(uiStyles.input, className)} {...props} />;
+});
+
+Input.displayName = "Input";
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  function Textarea({ className, ...props }, ref) {
+    return <textarea ref={ref} className={cn(uiStyles.input, "min-h-20 py-2", className)} {...props} />;
+  }
+);
+
+Textarea.displayName = "Textarea";

package/src/components/modal.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as Dialog from "@radix-ui/react-dialog";
+import type * as React from "react";
+import { cn } from "../lib/cn";
+import { uiStyles } from "../styles";
+
+export const Modal = Dialog.Root;
+export const ModalTrigger = Dialog.Trigger;
+export const ModalClose = Dialog.Close;
+
+export function ModalContent({ className, ...props }: React.ComponentProps<typeof Dialog.Content>) {
+  return (
+    <Dialog.Portal>
+      <Dialog.Overlay className={uiStyles.modalOverlay} />
+      <Dialog.Content
+        className={cn(uiStyles.modalContent, className)}
+        {...props}
+      />
+    </Dialog.Portal>
+  );
+}
+
+export function ModalTitle({ className, ...props }: React.ComponentProps<typeof Dialog.Title>) {
+  return <Dialog.Title className={cn(uiStyles.modalTitle, className)} {...props} />;
+}
+
+export function ModalDescription({ className, ...props }: React.ComponentProps<typeof Dialog.Description>) {
+  return <Dialog.Description className={cn(uiStyles.modalDescription, className)} {...props} />;
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./components/button";
+export * from "./components/card";
+export * from "./components/input";
+export * from "./components/modal";
+export * from "./lib/cn";
+export * from "./styles";

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/styles.ts

@@ -0,0 +1,20 @@
+export const uiStyles = {
+  shell: "min-h-screen bg-bopo-bg text-bopo-text",
+  card: "rounded-xl border border-bopo-border bg-bopo-panel shadow-[0_1px_0_rgba(255,255,255,0.02)]",
+  cardHeader: "border-b border-bopo-border px-4 py-3 text-sm font-medium tracking-tight",
+  cardBody: "px-4 py-4",
+  muted: "text-bopo-muted",
+  tableHeader: "bg-bopo-panel-elevated text-xs uppercase tracking-wide text-bopo-muted",
+  input:
+    "h-9 w-full rounded-lg border border-bopo-border bg-bopo-panel-elevated px-3 text-sm text-bopo-text outline-none transition placeholder:text-bopo-muted/80 focus:border-bopo-accent focus:ring-2 focus:ring-bopo-accent/20",
+  buttonBase:
+    "inline-flex h-9 items-center justify-center rounded-lg border px-3 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-60",
+  buttonGhost: "border-bopo-border bg-transparent text-bopo-text hover:bg-bopo-panel-elevated",
+  buttonPrimary: "border-bopo-accent bg-bopo-accent text-white shadow-[0_0_0_1px_rgba(255,255,255,0.04)] hover:brightness-110",
+  badge: "inline-flex items-center rounded-md border px-2 py-0.5 text-xs",
+  modalOverlay: "fixed inset-0 z-50 bg-black/70 backdrop-blur-sm",
+  modalContent:
+    "fixed left-1/2 top-1/2 z-50 w-[min(720px,94vw)] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-bopo-border bg-bopo-panel p-5 shadow-2xl",
+  modalTitle: "text-base font-semibold tracking-tight text-bopo-text",
+  modalDescription: "mt-1 text-sm leading-6 text-bopo-muted"
+} as const;

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "declaration": true,
+    "emitDeclarationOnly": true
+  },
+  "include": ["src"]
+}