@viibestack/ui 0.1.0

package/README.md

@@ -0,0 +1,36 @@
+# @viibestack/ui
+
+Dependency-free React components -- currently a Feather/Lucide-style outline icon set (~28 icons), ported from `services/portal/frontend/src/Icons.tsx`. No runtime dependencies beyond `react` itself, so it's safe to use anywhere React runs, including apps deployed on the OpenNext Cloudflare Workers adapter (no Node-native code, nothing that needs `fs`/`stream`/native bindings).
+
+## Usage
+
+```tsx
+import { CheckIcon, TrashIcon, SettingsIcon } from "@viibestack/ui";
+
+<CheckIcon size={16} color="green" />
+<TrashIcon className="text-red-500" />
+```
+
+Every icon takes the same optional props: `size` (number, default 20), `color` (default `"currentColor"`, so it follows the surrounding text color / a Tailwind `text-*` class unless overridden), and `className`.
+
+## Consuming this from an app built outside this monorepo
+
+This package ships raw, untranspiled `.tsx` source (same convention as `@sideblend/shared-types`) -- no build step to keep it trivial to iterate on. Next.js does **not** transpile `node_modules` by default, so any app that installs this from npm needs one line in its `next.config.ts`:
+
+```ts
+const nextConfig: NextConfig = {
+  transpilePackages: ["@viibestack/ui"],
+};
+```
+
+## Publishing
+
+```sh
+npm login
+cd packages/ui
+npm publish
+```
+
+`publishConfig.access` is already set to `"public"` in `package.json`, so this publishes as a free public package under the `viibestack` npm organization rather than requiring a paid plan.
+
+Bump `version` in `package.json` before each subsequent publish (npm rejects re-publishing the same version).

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@viibestack/ui",
+  "version": "0.1.0",
+  "description": "Dependency-free React icon set -- Feather/Lucide-style outline glyphs, no runtime dependency on any icon library.",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "^19",
+    "typescript": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}

package/src/icons.tsx

@@ -0,0 +1,299 @@
+// Dependency-free inline icon set -- plain Feather/Lucide-style outline
+// glyphs, no runtime dependency on any icon library. Ported from
+// services/portal/frontend/src/Icons.tsx (that copy stays as-is, tuned to
+// the portal's own per-usage sizing) with a consistent, generic props API
+// so external consumers (AI-generated apps) get predictable size/color
+// control instead of each icon hardcoding its own width/height.
+
+export interface IconProps {
+  size?: number;
+  color?: string;
+  className?: string;
+}
+
+function svgProps({ size = 20, color = "currentColor", className }: IconProps) {
+  return {
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none" as const,
+    stroke: color,
+    strokeWidth: 2,
+    strokeLinecap: "round" as const,
+    strokeLinejoin: "round" as const,
+    className,
+  };
+}
+
+export function PanelIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <line x1="9" y1="3" x2="9" y2="21" />
+    </svg>
+  );
+}
+
+export function CloseIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <line x1="5" y1="5" x2="19" y2="19" />
+      <line x1="19" y1="5" x2="5" y2="19" />
+    </svg>
+  );
+}
+
+export function ExpandIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <polyline points="15 3 21 3 21 9" />
+      <polyline points="9 21 3 21 3 15" />
+      <line x1="21" y1="3" x2="14" y2="10" />
+      <line x1="3" y1="21" x2="10" y2="14" />
+    </svg>
+  );
+}
+
+export function CollapseIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <polyline points="9 3 9 9 3 9" />
+      <polyline points="21 15 15 15 15 21" />
+      <line x1="9" y1="9" x2="3" y2="3" />
+      <line x1="15" y1="15" x2="21" y2="21" />
+    </svg>
+  );
+}
+
+export function ImageIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <path d="M21 15l-5-5L5 21" />
+    </svg>
+  );
+}
+
+export function SunIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <circle cx="12" cy="12" r="4" />
+      <line x1="12" y1="2" x2="12" y2="4" />
+      <line x1="12" y1="20" x2="12" y2="22" />
+      <line x1="4.2" y1="4.2" x2="5.6" y2="5.6" />
+      <line x1="18.4" y1="18.4" x2="19.8" y2="19.8" />
+      <line x1="2" y1="12" x2="4" y2="12" />
+      <line x1="20" y1="12" x2="22" y2="12" />
+      <line x1="4.2" y1="19.8" x2="5.6" y2="18.4" />
+      <line x1="18.4" y1="5.6" x2="19.8" y2="4.2" />
+    </svg>
+  );
+}
+
+export function MoonIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}
+
+export function MenuIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <line x1="3" y1="6" x2="21" y2="6" />
+      <line x1="3" y1="12" x2="21" y2="12" />
+      <line x1="3" y1="18" x2="21" y2="18" />
+    </svg>
+  );
+}
+
+export function BellIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
+      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+    </svg>
+  );
+}
+
+export function ChatIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+    </svg>
+  );
+}
+
+export function VideoIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M23 7l-7 5 7 5V7z" />
+      <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+    </svg>
+  );
+}
+
+export function UsersIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </svg>
+  );
+}
+
+export function PlugIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M22 9.5 14.5 2 12 4.5l1.5 1.5-5 5L7 9.5 4.5 12l7.5 7.5L14.5 17l-1.5-1.5 5-5 1.5 1.5z" />
+      <line x1="16" y1="2" x2="18" y2="4" />
+      <line x1="2" y1="16" x2="4" y2="18" />
+    </svg>
+  );
+}
+
+export function SupportIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <circle cx="12" cy="12" r="10" />
+      <circle cx="12" cy="12" r="4" />
+      <line x1="4.9" y1="4.9" x2="9.2" y2="9.2" />
+      <line x1="14.8" y1="14.8" x2="19.1" y2="19.1" />
+      <line x1="14.8" y1="9.2" x2="19.1" y2="4.9" />
+      <line x1="4.9" y1="19.1" x2="9.2" y2="14.8" />
+    </svg>
+  );
+}
+
+export function EmailIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <rect x="2" y="4" width="20" height="16" rx="2" />
+      <path d="m2 6 10 7 10-7" />
+    </svg>
+  );
+}
+
+export function GlobeIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="2" y1="12" x2="22" y2="12" />
+      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+    </svg>
+  );
+}
+
+export function ArrowRightIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M4 17l6-6-6-6" />
+      <path d="M12 19h8" />
+    </svg>
+  );
+}
+
+export function ShieldIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M12 2 4 5v6c0 5 3.4 8.7 8 10 4.6-1.3 8-5 8-10V5z" />
+    </svg>
+  );
+}
+
+export function ServerIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <rect x="2" y="3" width="20" height="7" rx="1.5" />
+      <rect x="2" y="14" width="20" height="7" rx="1.5" />
+      <line x1="6" y1="6.5" x2="6.01" y2="6.5" />
+      <line x1="6" y1="17.5" x2="6.01" y2="17.5" />
+    </svg>
+  );
+}
+
+export function CodeIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </svg>
+  );
+}
+
+export function EditIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z" />
+    </svg>
+  );
+}
+
+export function SettingsIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </svg>
+  );
+}
+
+export function GridIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <rect x="3" y="3" width="7" height="7" rx="1" />
+      <rect x="14" y="3" width="7" height="7" rx="1" />
+      <rect x="3" y="14" width="7" height="7" rx="1" />
+      <rect x="14" y="14" width="7" height="7" rx="1" />
+    </svg>
+  );
+}
+
+export function SparkleIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M12 3v4M12 17v4M3 12h4M17 12h4" />
+      <path d="M12 8a4 4 0 0 0 4 4 4 4 0 0 0-4 4 4 4 0 0 0-4-4 4 4 0 0 0 4-4z" />
+    </svg>
+  );
+}
+
+export function UploadIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" y1="3" x2="12" y2="15" />
+    </svg>
+  );
+}
+
+export function CheckIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+export function TrashIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </svg>
+  );
+}
+
+export function SearchIcon(props: IconProps = {}) {
+  return (
+    <svg {...svgProps(props)}>
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+  );
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./icons";