@prediktif/ui 0.1.4

package/README.md

@@ -0,0 +1,142 @@
+# `@prediktif/ui`
+
+The official shared Design System and UI Component Library for the **Prediktif** ecosystem.
+
+This repository provides reusable React components, custom layout blocks, and standardized design tokens for applications built within the Prediktif product line.
+
+---
+
+## 🚀 Quick Start (Installation)
+
+To consume Prediktif's custom components in any application within the ecosystem:
+
+```bash
+pnpm add @prediktif/ui
+# or
+npm install @prediktif/ui
+# or
+yarn add @prediktif/ui
+```
+
+---
+
+## 💻 Usage
+
+Only Prediktif's custom composed components (`src/components/composed/*`) are exposed by the package entry points.
+
+### Importing Composed Components
+
+```tsx
+import { HeaderTitle } from "@prediktif/ui";
+
+export default function DashboardHeader() {
+  return (
+    <HeaderTitle
+      title="User Management"
+      subtitle="Manage roles and permissions across your organization"
+    />
+  );
+}
+```
+
+Or via subpath export:
+
+```tsx
+import { HeaderTitle } from "@prediktif/ui/composed";
+```
+
+---
+
+## 🏗️ Project Architecture & Component Classification
+
+The repository is structured as follows:
+
+```
+src/
+├── components/
+│   ├── composed/      <-- Custom components built by Prediktif (EXPOSED)
+│   ├── ai-elements/   <-- Third-party AI/LLM UI components (Internal)
+│   └── ui/            <-- Third-party primitive UI components (Internal)
+├── app/               <-- Next.js Documentation & Preview Portal
+├── index.ts           <-- Main library entry point
+└── components/composed/index.ts <-- Composed components export index
+```
+
+* **`src/components/composed/`**: High-level, custom-tailored components created specifically for Prediktif applications. **These components are bundled and exported in the published package.**
+* **`src/components/ui/` & `src/components/ai-elements/`**: Base primitives and AI component libraries used internally to construct `composed` elements and render the local documentation preview.
+
+---
+
+## 🛠️ Development Workflow
+
+### 1. Running the Local Documentation Portal
+To preview components and view interactive documentation locally:
+
+```bash
+pnpm dev
+```
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### 2. Adding a New Composed Component
+
+1. Create your component in `src/components/composed/my-component.tsx`:
+   ```tsx
+   export interface MyComponentProps {
+     label: string;
+   }
+
+   export function MyComponent({ label }: MyComponentProps) {
+     return <div className="p-4 rounded-md border">{label}</div>;
+   }
+   ```
+2. Export the component in `src/components/composed/index.ts`:
+   ```ts
+   export * from "./header-title";
+   export * from "./my-component";
+   ```
+3. (Optional) Create a documentation page in `src/app/(docs)/components/my-component/page.tsx` for visual testing.
+
+---
+
+## 📦 Building & Publishing
+
+### Building the Component Library
+To build the distribution bundle (`dist/index.mjs`, `dist/index.js`, `dist/index.d.ts`):
+
+```bash
+pnpm build:lib
+```
+
+This uses `tsup` to bundle the TypeScript components while preserving React `"use client"` directives and generating TypeScript type declarations (`.d.ts`).
+
+### Publishing to NPM Registry
+
+> [!NOTE]
+> **Private GitHub Repository + Public NPM Package**:
+> The GitHub repository is **Private** to protect source code and documentation history.
+> The compiled library package is published **Publicly** to NPM (`npmjs.com`) so that all Prediktif ecosystem projects can install it without requiring GitHub credentials or tokens.
+
+#### Publishing Steps:
+
+1. **Bump Version** in `package.json` (or use `npm version patch | minor | major`):
+   ```bash
+   npm version patch
+   ```
+
+2. **Login to NPM** (if not authenticated):
+   ```bash
+   npm login
+   ```
+
+3. **Publish Package**:
+   ```bash
+   pnpm publish --access public --registry https://registry.npmjs.org/
+   ```
+
+*Note: The `prepublishOnly` hook automatically runs `pnpm build:lib` before publishing.*
+
+---
+
+## 📄 License
+
+Private & Proprietary — **Prediktif Ecosystem**. All rights reserved.

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+
+interface HeaderTitleProps {
+    title: React.ReactNode;
+    subtitle: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
+
+export { HeaderTitle, type HeaderTitleProps };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+
+interface HeaderTitleProps {
+    title: React.ReactNode;
+    subtitle: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
+
+export { HeaderTitle, type HeaderTitleProps };

package/dist/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  HeaderTitle: () => HeaderTitle
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/composed/header-title.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var HeaderTitle = (0, import_react.memo)(function HeaderTitle2({
+  title,
+  subtitle,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "font-semibold", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground", children: subtitle })
+    ] }),
+    children
+  ] });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HeaderTitle
+});

package/dist/index.mjs

@@ -0,0 +1,19 @@
+// src/components/composed/header-title.tsx
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HeaderTitle = memo(function HeaderTitle2({
+  title,
+  subtitle,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "font-semibold", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtitle })
+    ] }),
+    children
+  ] });
+});
+export {
+  HeaderTitle
+};

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@prediktif/ui",
+  "version": "0.1.4",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./composed": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@radix-ui/react-use-controllable-state": "^1.2.6",
+    "@rive-app/react-webgl2": "^4.34.2",
+    "@shadcn/react": "^0.3.1",
+    "@streamdown/cjk": "^1.0.3",
+    "@streamdown/code": "^1.1.1",
+    "@streamdown/math": "^1.0.2",
+    "@streamdown/mermaid": "^1.0.2",
+    "@xyflow/react": "^12.11.6",
+    "ai": "^7.0.101",
+    "ansi-to-react": "^6.2.6",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
+    "cn": "^0.3.0",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
+    "lucide-react": "^1.46.0",
+    "media-chrome": "^4.19.2",
+    "motion": "^13.3.0",
+    "nanoid": "^6.0.1",
+    "next": "16.3.5",
+    "next-themes": "^0.4.6",
+    "react": "19.2.8",
+    "react-day-picker": "^10.0.1",
+    "react-dom": "19.2.8",
+    "react-jsx-parser": "^2.4.1",
+    "react-resizable-panels": "^4.12.4",
+    "recharts": "3.8.0",
+    "shadcn": "^4.21.0",
+    "shiki": "^4.4.3",
+    "streamdown": "^2.6.0",
+    "tokenlens": "^1.3.1",
+    "tw-animate-css": "^1.4.0",
+    "use-stick-to-bottom": "^1.1.6"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.2",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "tailwindcss": "^4",
+    "tsup": "^8.5.1",
+    "typescript": "^5"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "build:lib": "tsup src/index.ts --format esm,cjs --dts --clean --tsconfig tsconfig.build.json --external react,react-dom,next",
+    "start": "next start",
+    "lint": "biome check",
+    "format": "biome format --write"
+  }
+}