devnonla-ui 0.1.0

package/src/checkbox/Checkbox.tsx

@@ -0,0 +1,50 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from "react";
+import { cn } from "../lib/cn";
+
+export type CheckboxProps = Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "onCheckedChange" | "checked" | "onChange"> & {
+  checked?: boolean | "indeterminate";
+  defaultChecked?: boolean;
+  /** antd-style — receives next checked boolean (not a DOM event). */
+  onChange?: (checked: boolean) => void;
+  children?: ReactNode;
+  indeterminate?: boolean;
+};
+
+function CheckIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden>
+      <path d="M2 5.2L4.1 7.2L8 2.8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(
+  { className, checked, defaultChecked, onChange, children, indeterminate, disabled, ...rest },
+  ref,
+) {
+  const resolved = indeterminate ? "indeterminate" : checked;
+  return (
+    <label className={cn("inline-flex items-center gap-2 text-sm text-foreground cursor-pointer", disabled && "opacity-45 cursor-not-allowed")}>
+      <CheckboxPrimitive.Root
+        ref={ref}
+        checked={resolved}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        onCheckedChange={(v) => onChange?.(v === true)}
+        className={cn(
+          "size-4 shrink-0 rounded-[4px] border border-input bg-[var(--control-bg)] transition-colors duration-150 ease-[cubic-bezier(0.16,1,0.3,1)]",
+          "focus-visible:outline-none data-[state=checked]:bg-brand data-[state=checked]:border-brand data-[state=checked]:text-[var(--nonla-solid-fg)]",
+          "data-[state=indeterminate]:bg-brand data-[state=indeterminate]:border-brand data-[state=indeterminate]:text-[var(--nonla-solid-fg)]",
+          className,
+        )}
+        {...rest}
+      >
+        <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current animate-[nonla-check-in_150ms_cubic-bezier(0.16,1,0.3,1)]">
+          <CheckIcon />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+      {children != null ? <span>{children}</span> : null}
+    </label>
+  );
+});

package/src/codeblock/CodeBlock.tsx

@@ -0,0 +1,76 @@
+import { type ComponentProps, type ReactNode, createContext, useContext, useMemo } from "react";
+import { ButtonCopy } from "../button/ButtonCopy";
+import { cn } from "../lib/cn";
+import { highlightCode, languageLabel, wrapHljsLines } from "./highlight";
+
+type CodeBlockContextValue = {
+  code: string;
+};
+
+const CodeBlockContext = createContext<CodeBlockContextValue | null>(null);
+
+export type CodeBlockProps = ComponentProps<"div"> & {
+  /** Source code to render. */
+  code: string;
+  /** Language for highlight.js (`javascript`, `tsx`, `json`, …). */
+  language?: string;
+  /** Filename / label shown in the header. Falls back to the language name. */
+  title?: ReactNode;
+  /** Show gutter line numbers. */
+  lineNumbers?: boolean;
+  /** Wrap long lines instead of horizontal scroll. */
+  wordWrap?: boolean;
+};
+
+function CodeFileIcon({ size = 14 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 256 256" aria-hidden>
+      <path fill="none" stroke="currentColor" strokeWidth="25" strokeLinecap="round" d="M208 128l-80 80M192 40 40 192" />
+    </svg>
+  );
+}
+
+export type CodeBlockCopyButtonProps = ComponentProps<"button"> & {
+  content?: string;
+};
+
+export function CodeBlockCopyButton({ content, className, ...props }: CodeBlockCopyButtonProps) {
+  const ctx = useContext(CodeBlockContext);
+  return <ButtonCopy text={content ?? ctx?.code ?? ""} label="Copy code" className={className} {...props} />;
+}
+
+export function CodeBlock({ code, language, title, lineNumbers = false, wordWrap = false, className, children, ...props }: CodeBlockProps) {
+  const html = useMemo(() => {
+    const highlighted = highlightCode(code, language);
+    return lineNumbers ? wrapHljsLines(highlighted) : highlighted;
+  }, [code, language, lineNumbers]);
+
+  const label = title ?? languageLabel(language);
+
+  return (
+    <CodeBlockContext.Provider value={{ code }}>
+      <div className={cn("nonla-codeblock relative flex min-w-0 w-full flex-col overflow-clip rounded-lg border border-border bg-glass-bar text-sm text-foreground backdrop-blur-lg", className)} data-language={language} {...props}>
+        <div className="flex h-9 items-center justify-between gap-2 pl-2 pr-1 text-sm text-muted-foreground">
+          <div className="flex min-w-0 items-center gap-2">
+            {label ? (
+              <>
+                <CodeFileIcon />
+                <span className="truncate font-medium">{label}</span>
+              </>
+            ) : null}
+          </div>
+          <CodeBlockCopyButton />
+        </div>
+
+        <div className={cn("nonla-codeblock-body nonla-codeblock-well relative min-w-0 overflow-y-auto bg-card font-mono text-[13px] leading-5", children ? "max-h-96" : "mx-0.5 mb-0.5 max-h-96 rounded-lg")}>
+          <div className={cn("w-full", !wordWrap && "overflow-x-auto")}>
+            <pre className={cn("nonla-codeblock-pre m-0 whitespace-pre break-normal", lineNumbers && "nonla-codeblock-lines", wordWrap && "whitespace-pre-wrap wrap-break-word")}>
+              <code className={cn("block px-3 py-2.5", !wordWrap && "w-max min-w-full")} dangerouslySetInnerHTML={{ __html: html }} />
+            </pre>
+          </div>
+        </div>
+        {children}
+      </div>
+    </CodeBlockContext.Provider>
+  );
+}

package/src/codeblock/highlight.ts

@@ -0,0 +1,159 @@
+import hljs from "highlight.js/lib/common";
+import bash from "highlight.js/lib/languages/bash";
+
+/** highlight.js bash only colors shell builtins (`echo`, `ls`) — not `docker run`, flags, or numbers. */
+const CLI_COMMANDS = [
+  "docker",
+  "git",
+  "npm",
+  "npx",
+  "pnpm",
+  "yarn",
+  "bun",
+  "curl",
+  "wget",
+  "ssh",
+  "scp",
+  "rsync",
+  "brew",
+  "pip",
+  "pip3",
+  "cargo",
+  "make",
+  "node",
+  "deno",
+  "python",
+  "python3",
+  "kubectl",
+  "helm",
+  "aws",
+  "gh",
+];
+
+const SHELL_KEYWORDS = "if|then|else|elif|fi|for|while|until|in|do|done|case|esac|function|select|time|coproc";
+
+hljs.registerLanguage("bash", (api) => {
+  const lang = bash(api);
+  const keywords = lang.keywords;
+  if (keywords && typeof keywords === "object" && !Array.isArray(keywords) && Array.isArray(keywords.built_in)) {
+    keywords.built_in = [...keywords.built_in, ...CLI_COMMANDS];
+  }
+  lang.contains = [
+    ...(lang.contains ?? []),
+    {
+      match: [/(?:^|\n)\s*/, new RegExp(`(?!(?:${SHELL_KEYWORDS})\\b)[a-z][\\w.-]*`)],
+      scope: { 2: "built_in" },
+      relevance: 0,
+    },
+    { className: "number", match: /\b\d+\b/, relevance: 0 },
+    { className: "attr", match: /(?<=[\s=])-{1,2}[A-Za-z0-9][\w-]*/, relevance: 0 },
+  ];
+  return lang;
+});
+
+const LANG_ALIAS: Record<string, string> = {
+  js: "javascript",
+  jsx: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  ts: "typescript",
+  tsx: "typescript",
+  mts: "typescript",
+  cts: "typescript",
+  py: "python",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  shell: "bash",
+  yml: "yaml",
+  md: "markdown",
+  rs: "rust",
+  cs: "csharp",
+  "c++": "cpp",
+  hpp: "cpp",
+  h: "c",
+  ps1: "powershell",
+  docker: "dockerfile",
+  gql: "graphql",
+};
+
+export function normalizeLang(language?: string): string | undefined {
+  if (!language) return undefined;
+  const key = language.trim().toLowerCase();
+  if (!key) return undefined;
+  return LANG_ALIAS[key] ?? key;
+}
+
+function escapeHtml(text: string): string {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export function highlightCode(code: string, language?: string): string {
+  const lang = normalizeLang(language);
+  if (lang && hljs.getLanguage(lang)) {
+    try {
+      return hljs.highlight(code, { language: lang, ignoreIllegals: true }).value;
+    } catch {
+      /* fall through */
+    }
+  }
+  try {
+    return hljs.highlightAuto(code).value;
+  } catch {
+    return escapeHtml(code);
+  }
+}
+
+export function wrapHljsLines(html: string): string {
+  return html.split("\n").map((line) => `<span class="hljs-line">${line}</span>`).join("\n");
+}
+
+const LANG_LABELS: Record<string, string> = {
+  js: "JavaScript",
+  javascript: "JavaScript",
+  jsx: "JSX",
+  ts: "TypeScript",
+  typescript: "TypeScript",
+  tsx: "TSX",
+  py: "Python",
+  python: "Python",
+  sh: "Shell",
+  bash: "Bash",
+  zsh: "Zsh",
+  shell: "Shell",
+  json: "JSON",
+  yaml: "YAML",
+  yml: "YAML",
+  toml: "TOML",
+  html: "HTML",
+  css: "CSS",
+  sql: "SQL",
+  md: "Markdown",
+  markdown: "Markdown",
+  rs: "Rust",
+  rust: "Rust",
+  go: "Go",
+  java: "Java",
+  cpp: "C++",
+  c: "C",
+  cs: "C#",
+  csharp: "C#",
+  php: "PHP",
+  rb: "Ruby",
+  ruby: "Ruby",
+  swift: "Swift",
+  kt: "Kotlin",
+  kotlin: "Kotlin",
+  graphql: "GraphQL",
+  dockerfile: "Dockerfile",
+  xml: "XML",
+  mermaid: "Mermaid",
+};
+
+/** Display name for a fenced-code language (`js` → `JavaScript`). */
+export function languageLabel(language?: string): string | undefined {
+  if (!language) return undefined;
+  const key = language.trim().toLowerCase();
+  if (!key) return undefined;
+  return LANG_LABELS[key] ?? language.trim();
+}

package/src/colorpicker/ColorPicker.tsx

@@ -0,0 +1,45 @@
+import { cn } from "../lib/cn";
+
+export type ColorPickerProps = {
+  presets: readonly string[];
+  value: string;
+  onChange: (color: string) => void;
+  size?: number;
+  className?: string;
+};
+
+const swatchClass =
+  "rounded-md cursor-pointer transition-all duration-150 hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+const activeClass = "ring-2 ring-ring ring-offset-2 ring-offset-background";
+
+export function ColorPicker({ presets, value, onChange, size = 28, className }: ColorPickerProps) {
+  const isCustom = !presets.includes(value);
+
+  return (
+    <div className={cn("flex items-center gap-1.5 flex-wrap", className)}>
+      {presets.map((preset) => {
+        const isActive = value === preset;
+        return (
+          <button
+            key={preset}
+            type="button"
+            onClick={() => onChange(preset)}
+            className={cn(swatchClass, isActive && activeClass)}
+            style={{ width: size, height: size, backgroundColor: preset }}
+            title={preset}
+          />
+        );
+      })}
+
+      <label
+        className={cn("relative overflow-hidden", swatchClass, isCustom && activeClass)}
+        style={{ width: size, height: size }}
+        title="Custom color"
+      >
+        <div className="absolute inset-0" style={{ background: "conic-gradient(#e88080, #e8c870, #80d4a0, #70c8d8, #7aaee8, #a888e8, #e88080)" }} />
+        {isCustom ? <div className="absolute inset-1 rounded-sm" style={{ backgroundColor: value }} /> : null}
+        <input type="color" value={value} onChange={(e) => onChange(e.target.value)} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+      </label>
+    </div>
+  );
+}