@indinno/digicode-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DigiCode
+
+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/README.md

@@ -0,0 +1,167 @@
+# DigiCode
+
+A source-owned React UI primitive library with a shadcn-style CLI. It contains **UI elements only** — no pages, marketing sections, headers, footers, dashboards, or application-specific content.
+
+The visual language is based on the clean DigiCode UI: dark ink actions, blue accents, soft surfaces, 12–18px radii, restrained borders, and accessible focus states.
+
+## Components
+
+- Accordion
+- Alert
+- Avatar
+- Badge
+- Breadcrumb
+- Button
+- Card
+- Checkbox
+- Dialog
+- Drawer
+- Dropdown Menu
+- Empty State
+- Input
+- Pagination
+- Progress
+- Radio Group
+- Select
+- Separator
+- Skeleton
+- Spinner
+- Stat Card
+- Switch
+- Table
+- Tabs
+- Textarea
+- Tooltip
+
+## Publish to npm
+
+1. Change the package name in `package.json` if needed. The starter uses:
+
+```json
+"name": "@indinno/digicode-ui"
+```
+
+2. Login and publish:
+
+```bash
+npm login
+npm publish --access public
+```
+
+## Use it like shadcn
+
+Initialize the target React/Next.js project:
+
+```bash
+npx @indinno/digicode-ui init
+```
+
+Add only the components you need:
+
+```bash
+npx @indinno/digicode-ui add button input card badge
+```
+
+Or install the full primitive set:
+
+```bash
+npx @indinno/digicode-ui add all
+```
+
+List available components:
+
+```bash
+npx @indinno/digicode-ui list
+```
+
+The CLI copies source into either:
+
+```text
+src/components/ui
+src/lib/cn.ts
+src/styles/digicode.css
+```
+
+or, for projects without a `src` directory:
+
+```text
+components/ui
+lib/cn.ts
+styles/digicode.css
+```
+
+That means the consuming project **owns the source code**, just like the shadcn model. You can edit a copied button or card locally without waiting for a library release.
+
+## Import the stylesheet once
+
+For a Next.js app using `src/app`, add this to the root layout or global stylesheet entry:
+
+```tsx
+import "../styles/digicode.css";
+```
+
+Then use copied components normally:
+
+```tsx
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+export function Example() {
+  return (
+    <Card elevated>
+      <CardHeader>
+        <CardTitle>Client details</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Input label="Client name" placeholder="Enter client name" />
+        <Button>Save client</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Dark theme
+
+Set `data-digicode-theme="dark"` on any parent to switch the token set:
+
+```tsx
+<div data-digicode-theme="dark">
+  <Button>Dark theme button</Button>
+</div>
+```
+
+## Customize the design system
+
+Change the CSS variables at the top of `styles/digicode.css`:
+
+```css
+:root {
+  --digicode-primary: #2474ad;
+  --digicode-ink: #1c2f41;
+  --digicode-radius: 12px;
+  --digicode-radius-lg: 18px;
+}
+```
+
+Because the files are copied into the project, you can also modify each component directly.
+
+## Package philosophy
+
+This package intentionally excludes:
+
+- complete pages
+- hero sections
+- website navigation
+- footer sections
+- DigiCode-specific copy/data
+- API/enquiry logic
+- app-specific dashboards
+
+Only reusable UI primitives belong here.

package/bin/digicode.mjs

@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const packageRoot = path.resolve(__dirname, "..");
+const registryRoot = path.join(packageRoot, "registry");
+const manifest = JSON.parse(fs.readFileSync(path.join(registryRoot, "registry.json"), "utf8"));
+const args = process.argv.slice(2);
+const command = args[0];
+const requested = args.slice(1);
+const cwd = process.cwd();
+
+function fail(message) {
+  console.error(`\nDigiCode: ${message}\n`);
+  process.exit(1);
+}
+
+function detectSourceRoot() {
+  if (fs.existsSync(path.join(cwd, "src"))) return path.join(cwd, "src");
+  return cwd;
+}
+
+function paths() {
+  const sourceRoot = detectSourceRoot();
+  return {
+    sourceRoot,
+    componentsDir: path.join(sourceRoot, "components", "ui"),
+    libDir: path.join(sourceRoot, "lib"),
+    stylesDir: path.join(sourceRoot, "styles"),
+    configFile: path.join(cwd, "digicode.json")
+  };
+}
+
+function ensureDir(dir) {
+  fs.mkdirSync(dir, { recursive: true });
+}
+
+function copyIfMissing(source, destination, force = false) {
+  ensureDir(path.dirname(destination));
+  if (fs.existsSync(destination) && !force) return false;
+  fs.copyFileSync(source, destination);
+  return true;
+}
+
+function init() {
+  const p = paths();
+  ensureDir(p.componentsDir);
+  ensureDir(p.libDir);
+  ensureDir(p.stylesDir);
+
+  copyIfMissing(path.join(registryRoot, "lib", "cn.ts"), path.join(p.libDir, "cn.ts"));
+  copyIfMissing(path.join(registryRoot, "styles", "digicode.css"), path.join(p.stylesDir, "digicode.css"));
+
+  if (!fs.existsSync(p.configFile)) {
+    fs.writeFileSync(
+      p.configFile,
+      JSON.stringify(
+        {
+          sourceRoot: path.relative(cwd, p.sourceRoot) || ".",
+          components: path.relative(cwd, p.componentsDir),
+          styles: path.relative(cwd, path.join(p.stylesDir, "digicode.css")),
+          style: manifest.style
+        },
+        null,
+        2
+      ) + "\n"
+    );
+  }
+
+  console.log("\nDigiCode initialized.");
+  console.log(`Components: ${path.relative(cwd, p.componentsDir)}`);
+  console.log(`Styles:     ${path.relative(cwd, path.join(p.stylesDir, "digicode.css"))}`);
+  console.log("\nImport the stylesheet once in your root layout/main entry.");
+  if (p.sourceRoot.endsWith(`${path.sep}src`)) {
+    console.log('For Next.js src/app/layout.tsx: import "../styles/digicode.css";');
+  } else {
+    console.log('For app/layout.tsx: import "../styles/digicode.css";');
+  }
+}
+
+function add(names) {
+  if (!names.length) fail(`Specify components, for example: digicode add button input card`);
+  init();
+
+  const p = paths();
+  const targets = names.includes("all") ? manifest.components : names;
+  const unknown = targets.filter((name) => !manifest.components.includes(name));
+  if (unknown.length) fail(`Unknown component${unknown.length > 1 ? "s" : ""}: ${unknown.join(", ")}`);
+
+  let copied = 0;
+  for (const name of targets) {
+    const source = path.join(registryRoot, "components", `${name}.tsx`);
+    const destination = path.join(p.componentsDir, `${name}.tsx`);
+    if (copyIfMissing(source, destination)) {
+      console.log(`+ ${path.relative(cwd, destination)}`);
+      copied++;
+    } else {
+      console.log(`= ${path.relative(cwd, destination)} (already exists)`);
+    }
+  }
+
+  console.log(`\n${copied} component${copied === 1 ? "" : "s"} added.`);
+}
+
+function list() {
+  console.log("\nAvailable DigiCode components:\n");
+  for (const name of manifest.components) console.log(`  - ${name}`);
+  console.log("");
+}
+
+function help() {
+  console.log(`\nDigiCode CLI\n\nUsage:\n  digicode init\n  digicode add button input card\n  digicode add all\n  digicode list\n\nWith npx after publishing:\n  npx @indinno/digicode-ui init\n  npx @indinno/digicode-ui add button input card\n`);
+}
+
+switch (command) {
+  case "init":
+    init();
+    break;
+  case "add":
+    add(requested);
+    break;
+  case "list":
+    list();
+    break;
+  case undefined:
+  case "help":
+  case "--help":
+  case "-h":
+    help();
+    break;
+  default:
+    fail(`Unknown command: ${command}`);
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@indinno/digicode-ui",
+  "version": "0.1.0",
+  "description": "DigiCode shadcn-style source-owned React UI primitives for reusable product interfaces.",
+  "type": "module",
+  "license": "MIT",
+  "bin": {
+    "digicode": "./bin/digicode.mjs"
+  },
+  "files": [
+    "bin",
+    "registry",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "nextjs",
+    "ui",
+    "components",
+    "design-system",
+    "shadcn",
+    "cli"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/registry/components/accordion.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+
+export interface AccordionItem {
+  value: string;
+  title: ReactNode;
+  content: ReactNode;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  defaultValue?: string;
+  allowCollapse?: boolean;
+  className?: string;
+}
+
+export function Accordion({ items, defaultValue, allowCollapse = true, className }: AccordionProps) {
+  const [open, setOpen] = useState(defaultValue ?? "");
+  return (
+    <div className={className ? `digicode-accordion ${className}` : "digicode-accordion"}>
+      {items.map((item) => {
+        const expanded = open === item.value;
+        return (
+          <div className="digicode-accordion__item" key={item.value}>
+            <button
+              type="button"
+              className="digicode-accordion__trigger"
+              aria-expanded={expanded}
+              onClick={() => setOpen(expanded && allowCollapse ? "" : item.value)}
+            >
+              <span>{item.title}</span>
+              <span className="digicode-accordion__chevron" aria-hidden="true">⌄</span>
+            </button>
+            {expanded && <div className="digicode-accordion__content">{item.content}</div>}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/registry/components/alert.tsx

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export type AlertVariant = "default" | "info" | "success" | "warning" | "danger";
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant;
+  icon?: ReactNode;
+  title?: string;
+}
+
+export function Alert({ className, variant = "default", icon, title, children, ...props }: AlertProps) {
+  return (
+    <div role="alert" className={cn("digicode-alert", variant !== "default" && `digicode-alert--${variant}`, className)} {...props}>
+      {icon && <span className="digicode-alert__icon">{icon}</span>}
+      <div>
+        {title && <p className="digicode-alert__title">{title}</p>}
+        <div className="digicode-alert__description">{children}</div>
+      </div>
+    </div>
+  );
+}

package/registry/components/avatar.tsx

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ImgHTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  size?: "sm" | "md" | "lg";
+  imageProps?: ImgHTMLAttributes<HTMLImageElement>;
+}
+
+export function Avatar({ className, src, alt = "", fallback = "?", size = "md", imageProps, ...props }: AvatarProps) {
+  return (
+    <span className={cn("digicode-avatar", `digicode-avatar--${size}`, className)} {...props}>
+      {src ? <img src={src} alt={alt} {...imageProps} /> : fallback}
+    </span>
+  );
+}

package/registry/components/badge.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export type BadgeVariant = "default" | "primary" | "success" | "warning" | "danger";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> { variant?: BadgeVariant; }
+
+export function Badge({ className, variant = "default", ...props }: BadgeProps) {
+  return <span className={cn("digicode-badge", variant !== "default" && `digicode-badge--${variant}`, className)} {...props} />;
+}

package/registry/components/breadcrumb.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+export interface BreadcrumbItem {
+  label: ReactNode;
+  href?: string;
+}
+
+export function Breadcrumb({ items, separator = "/", className }: { items: BreadcrumbItem[]; separator?: ReactNode; className?: string }) {
+  return (
+    <nav aria-label="Breadcrumb" className={className ? `digicode-breadcrumb ${className}` : "digicode-breadcrumb"}>
+      {items.map((item, index) => {
+        const current = index === items.length - 1;
+        return (
+          <span key={index} style={{ display: "contents" }}>
+            {current ? <span className="digicode-breadcrumb__current" aria-current="page">{item.label}</span> : item.href ? <a href={item.href}>{item.label}</a> : <span>{item.label}</span>}
+            {!current && <span className="digicode-breadcrumb__sep" aria-hidden="true">{separator}</span>}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

package/registry/components/button.tsx

@@ -0,0 +1,38 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
+export type ButtonSize = "sm" | "md" | "lg" | "icon";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+}
+
+export function Button({
+  className,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  leftIcon,
+  rightIcon,
+  disabled,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={cn("digicode-button", `digicode-button--${variant}`, size !== "md" && `digicode-button--${size}`, className)}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      {...props}
+    >
+      {loading ? <span className="digicode-button__spinner" aria-hidden="true" /> : leftIcon}
+      {children}
+      {!loading && rightIcon}
+    </button>
+  );
+}

package/registry/components/card.tsx

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> { elevated?: boolean; }
+export function Card({ className, elevated = false, ...props }: CardProps) { return <div className={cn("digicode-card", elevated && "digicode-card--elevated", className)} {...props} />; }
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("digicode-card__header", className)} {...props} />; }
+export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) { return <h3 className={cn("digicode-card__title", className)} {...props} />; }
+export function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) { return <p className={cn("digicode-card__description", className)} {...props} />; }
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("digicode-card__content", className)} {...props} />; }
+export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <div className={cn("digicode-card__footer", className)} {...props} />; }

package/registry/components/checkbox.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: ReactNode;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox({ className, label, ...props }, ref) {
+  return (
+    <label className="digicode-checkline">
+      <input ref={ref} type="checkbox" className={cn("digicode-checkbox", className)} {...props} />
+      {label && <span>{label}</span>}
+    </label>
+  );
+});

package/registry/components/dialog.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useRef, type ReactNode } from "react";
+
+export interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+}
+
+export function Dialog({ open, onOpenChange, title, description, children, footer, className }: DialogProps) {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    if (open && !node.open) node.showModal();
+    if (!open && node.open) node.close();
+  }, [open]);
+
+  return (
+    <dialog
+      ref={ref}
+      className={className ? `digicode-dialog-native ${className}` : "digicode-dialog-native"}
+      onClose={() => onOpenChange(false)}
+      onCancel={(event) => {
+        event.preventDefault();
+        onOpenChange(false);
+      }}
+    >
+      <div className="digicode-dialog__header">
+        <div>
+          <h2 className="digicode-dialog__title">{title}</h2>
+          {description && <p className="digicode-dialog__description">{description}</p>}
+        </div>
+        <button type="button" className="digicode-dialog__close" aria-label="Close dialog" onClick={() => onOpenChange(false)}>×</button>
+      </div>
+      {children && <div className="digicode-dialog__body">{children}</div>}
+      {footer && <div className="digicode-dialog__footer">{footer}</div>}
+    </dialog>
+  );
+}

package/registry/components/drawer.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useRef, type ReactNode } from "react";
+
+export interface DrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+}
+
+export function Drawer({ open, onOpenChange, title, children, footer, className }: DrawerProps) {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    if (open && !node.open) node.showModal();
+    if (!open && node.open) node.close();
+  }, [open]);
+
+  return (
+    <dialog
+      ref={ref}
+      className={className ? `digicode-drawer-native ${className}` : "digicode-drawer-native"}
+      onClose={() => onOpenChange(false)}
+      onCancel={(event) => {
+        event.preventDefault();
+        onOpenChange(false);
+      }}
+    >
+      <div className="digicode-drawer__header">
+        <h2 className="digicode-dialog__title">{title}</h2>
+        <button type="button" className="digicode-dialog__close" aria-label="Close drawer" onClick={() => onOpenChange(false)}>×</button>
+      </div>
+      {children && <div className="digicode-drawer__body">{children}</div>}
+      {footer && <div className="digicode-drawer__footer">{footer}</div>}
+    </dialog>
+  );
+}

package/registry/components/dropdown-menu.tsx

@@ -0,0 +1,38 @@
+import type { ButtonHTMLAttributes, DetailsHTMLAttributes, ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export interface DropdownMenuProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
+  trigger: ReactNode;
+  children: ReactNode;
+}
+
+export function DropdownMenu({ className, trigger, children, ...props }: DropdownMenuProps) {
+  return (
+    <details className={cn("digicode-dropdown", className)} {...props}>
+      <summary>{trigger}</summary>
+      <div className="digicode-dropdown__menu">{children}</div>
+    </details>
+  );
+}
+
+export function DropdownMenuLabel({ children }: { children: ReactNode }) {
+  return <div className="digicode-dropdown__label">{children}</div>;
+}
+
+export function DropdownMenuSeparator() {
+  return <div className="digicode-dropdown__separator" role="separator" />;
+}
+
+export interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  danger?: boolean;
+  icon?: ReactNode;
+}
+
+export function DropdownMenuItem({ className, danger = false, icon, children, ...props }: DropdownMenuItemProps) {
+  return (
+    <button type="button" className={cn("digicode-dropdown__item", danger && "digicode-dropdown__item--danger", className)} {...props}>
+      {icon}
+      <span>{children}</span>
+    </button>
+  );
+}