@konopskidev/ui 0.1.2 → 0.2.0

package/dist/lib/highlighter.js

@@ -0,0 +1,79 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+// src/lib/highlighter.tsx
+var languages = {
+	bash: () => import("shiki/langs/shellscript.mjs"),
+	css: () => import("shiki/langs/css.mjs"),
+	diff: () => import("shiki/langs/diff.mjs"),
+	html: () => import("shiki/langs/html.mjs"),
+	javascript: () => import("shiki/langs/javascript.mjs"),
+	json: () => import("shiki/langs/json.mjs"),
+	jsx: () => import("shiki/langs/jsx.mjs"),
+	markdown: () => import("shiki/langs/markdown.mjs"),
+	python: () => import("shiki/langs/python.mjs"),
+	sql: () => import("shiki/langs/sql.mjs"),
+	tsx: () => import("shiki/langs/tsx.mjs"),
+	typescript: () => import("shiki/langs/typescript.mjs"),
+	yaml: () => import("shiki/langs/yaml.mjs")
+};
+var aliases = {
+	js: "javascript",
+	md: "markdown",
+	py: "python",
+	sh: "bash",
+	shell: "bash",
+	shellscript: "bash",
+	ts: "typescript",
+	yml: "yaml",
+	zsh: "bash"
+};
+var highlighter;
+function getHighlighter() {
+	highlighter ??= createHighlighterCore({
+		themes: [import("shiki/themes/github-light.mjs"), import("shiki/themes/github-dark.mjs")],
+		langs: [],
+		engine: createJavaScriptRegexEngine({ forgiving: true })
+	});
+	return highlighter;
+}
+function getLanguage(language) {
+	const name = language.toLowerCase();
+	if (name === "ansi") return name;
+	if (name in languages) return name;
+	return aliases[name] ?? null;
+}
+async function loadHighlighter(language) {
+	const lang = getLanguage(language);
+	if (!lang) return null;
+	const shiki = await getHighlighter();
+	if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) await shiki.loadLanguage(languages[lang]);
+	return { highlight(code, state) {
+		const tokenize = (text) => shiki.codeToTokens(text, {
+			lang,
+			themes: {
+				light: "github-light",
+				dark: "github-dark"
+			},
+			defaultColor: false,
+			grammarState: state
+		}).tokens;
+		const tokens = lang === "ansi" ? code.split("\n").flatMap((line) => tokenize(line)) : tokenize(code);
+		return {
+			lines: tokens.map((line) => line.map((token, index) => /* @__PURE__ */ jsx("span", {
+				style: token.htmlStyle,
+				className: "text-(--shiki-light) dark:text-(--shiki-dark)",
+				children: token.content
+			}, index))),
+			state: shiki.getLastGrammarState(tokens)
+		};
+	} };
+}
+async function highlightCode(code, language) {
+	const highlighter = await loadHighlighter(language);
+	return highlighter ? highlighter.highlight(code).lines : null;
+}
+export { highlightCode, loadHighlighter };
+
+//# sourceMappingURL=highlighter.js.map

package/dist/lib/highlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlighter.js","names":[],"sources":["../../src/lib/highlighter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createHighlighterCore, type GrammarState, type HighlighterCore } from 'shiki/core';\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript';\n\n// Add the languages you need. Each one loads the first time it is used.\nconst languages = {\n  bash: () => import('shiki/langs/shellscript.mjs'),\n  css: () => import('shiki/langs/css.mjs'),\n  diff: () => import('shiki/langs/diff.mjs'),\n  html: () => import('shiki/langs/html.mjs'),\n  javascript: () => import('shiki/langs/javascript.mjs'),\n  json: () => import('shiki/langs/json.mjs'),\n  jsx: () => import('shiki/langs/jsx.mjs'),\n  markdown: () => import('shiki/langs/markdown.mjs'),\n  python: () => import('shiki/langs/python.mjs'),\n  sql: () => import('shiki/langs/sql.mjs'),\n  tsx: () => import('shiki/langs/tsx.mjs'),\n  typescript: () => import('shiki/langs/typescript.mjs'),\n  yaml: () => import('shiki/langs/yaml.mjs'),\n};\n\nconst aliases: Record<string, keyof typeof languages> = {\n  js: 'javascript',\n  md: 'markdown',\n  py: 'python',\n  sh: 'bash',\n  shell: 'bash',\n  shellscript: 'bash',\n  ts: 'typescript',\n  yml: 'yaml',\n  zsh: 'bash',\n};\n\nlet highlighter: Promise<HighlighterCore> | undefined;\n\nfunction getHighlighter() {\n  highlighter ??= createHighlighterCore({\n    themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark.mjs')],\n    langs: [],\n    engine: createJavaScriptRegexEngine({ forgiving: true }),\n  });\n\n  return highlighter;\n}\n\nfunction getLanguage(language: string) {\n  const name = language.toLowerCase();\n\n  if (name === 'ansi') {\n    return name;\n  }\n\n  if (name in languages) {\n    return name as keyof typeof languages;\n  }\n\n  return aliases[name] ?? null;\n}\n\n// Loads a language and returns a highlighter for it, or null for a language\n// that is not listed.\nexport async function loadHighlighter(language: string) {\n  const lang = getLanguage(language);\n\n  if (!lang) {\n    return null;\n  }\n\n  const shiki = await getHighlighter();\n\n  if (lang !== 'ansi' && !shiki.getLoadedLanguages().includes(lang)) {\n    await shiki.loadLanguage(languages[lang]);\n  }\n\n  return {\n    // Returns one React node per line, and the grammar state after the last\n    // line. Pass that state back to continue where the code left off.\n    highlight(code: string, state?: GrammarState) {\n      const tokenize = (text: string) =>\n        shiki.codeToTokens(text, {\n          lang,\n          themes: { light: 'github-light', dark: 'github-dark' },\n          defaultColor: false,\n          grammarState: state,\n        }).tokens;\n\n      // ANSI has no grammar state, so each line is tokenized on its own and\n      // gets the same colors whether it arrives in one piece or streams.\n      const tokens =\n        lang === 'ansi' ? code.split('\\n').flatMap((line) => tokenize(line)) : tokenize(code);\n\n      return {\n        lines: tokens.map((line) =>\n          line.map((token, index) => (\n            <span\n              key={index}\n              style={token.htmlStyle as React.CSSProperties}\n              className=\"text-(--shiki-light) dark:text-(--shiki-dark)\"\n            >\n              {token.content}\n            </span>\n          )),\n        ),\n        state: shiki.getLastGrammarState(tokens),\n      };\n    },\n  };\n}\n\n// Returns one React node per line, or null for a language that is not listed.\nexport async function highlightCode(code: string, language: string) {\n  const highlighter = await loadHighlighter(language);\n\n  return highlighter ? highlighter.highlight(code).lines : null;\n}\n"],"mappings":";;;;;AAKA,IAAM,YAAY;CAChB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,kBAAkB,OAAO;CACzB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,gBAAgB,OAAO;CACvB,cAAc,OAAO;CACrB,WAAW,OAAO;CAClB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,YAAY,OAAO;AACrB;AAEA,IAAM,UAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,aAAa;CACb,IAAI;CACJ,KAAK;CACL,KAAK;AACP;AAEA,IAAI;AAEJ,SAAS,iBAAiB;CACxB,gBAAgB,sBAAsB;EACpC,QAAQ,CAAC,OAAO,kCAAkC,OAAO,+BAA+B;EACxF,OAAO,CAAC;EACR,QAAQ,4BAA4B,EAAE,WAAW,KAAK,CAAC;CACzD,CAAC;CAED,OAAO;AACT;AAEA,SAAS,YAAY,UAAkB;CACrC,MAAM,OAAO,SAAS,YAAY;CAElC,IAAI,SAAS,QACX,OAAO;CAGT,IAAI,QAAQ,WACV,OAAO;CAGT,OAAO,QAAQ,SAAS;AAC1B;AAIA,eAAsB,gBAAgB,UAAkB;CACtD,MAAM,OAAO,YAAY,QAAQ;CAEjC,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,QAAQ,MAAM,eAAe;CAEnC,IAAI,SAAS,UAAU,CAAC,MAAM,mBAAmB,CAAC,CAAC,SAAS,IAAI,GAC9D,MAAM,MAAM,aAAa,UAAU,KAAK;CAG1C,OAAO,EAGL,UAAU,MAAc,OAAsB;EAC5C,MAAM,YAAY,SAChB,MAAM,aAAa,MAAM;GACvB;GACA,QAAQ;IAAE,OAAO;IAAgB,MAAM;GAAc;GACrD,cAAc;GACd,cAAc;EAChB,CAAC,CAAC,CAAC;EAIL,MAAM,SACJ,SAAS,SAAS,KAAK,MAAM,IAAI,CAAC,CAAC,SAAS,SAAS,SAAS,IAAI,CAAC,IAAI,SAAS,IAAI;EAEtF,OAAO;GACL,OAAO,OAAO,KAAK,SACjB,KAAK,KAAK,OAAO,UACf,oBAAC,QAAD;IAEE,OAAO,MAAM;IACb,WAAU;IAET,UAAA,MAAM;GACH,GALC,KAKD,CACP,CACH;GACA,OAAO,MAAM,oBAAoB,MAAM;EACzC;CACF,EACF;AACF;AAGA,eAAsB,cAAc,MAAc,UAAkB;CAClE,MAAM,cAAc,MAAM,gBAAgB,QAAQ;CAElD,OAAO,cAAc,YAAY,UAAU,IAAI,CAAC,CAAC,QAAQ;AAC3D"}

package/dist/lib/utils.cjs

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let cn = require("cn");
+Object.defineProperty(exports, "cn", {
+	enumerable: true,
+	get: function() {
+		return cn.cn;
+	}
+});

package/dist/lib/utils.d.cts

@@ -0,0 +1,8 @@
+/**
+ * The class-name merger every component in this package uses.
+ *
+ * It is re-exported here so an app consuming `@konopskidev/ui` can merge its own
+ * classes with the same semantics without adding its own copy of
+ * `clsx` + `tailwind-merge`.
+ */
+export { cn } from 'cn';

package/{src → dist}/styles/globals.css

@@ -31,3 +31,14 @@
 @import './utilities.css';
 @import './base.css';
 @import './prose.css';
+
+/*
+ * Register this package's own modules as Tailwind sources.
+ *
+ * Tailwind does not scan `node_modules`, so without these lines every component
+ * renders unstyled with no error anywhere. The paths are relative to this file,
+ * which is why they work from a consumer's install without configuration.
+ */
+@source '../components';
+@source '../lib';
+@source '../hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konopskidev/ui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "The konopskidev design system: shadcn/ui components styled with the konopskidev tokens on Tailwind CSS v4.",
   "keywords": [
     "shadcn",
@@ -27,42 +27,121 @@
   },
   "files": [
     "dist",
-    "src/styles",
     "README.md",
     "LICENSE"
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./components/*": {
-      "types": "./dist/components/ui/*.d.ts",
-      "import": "./dist/components/ui/*.js"
+      "import": {
+        "types": "./dist/components/ui/*.d.ts",
+        "default": "./dist/components/ui/*.js"
+      },
+      "require": {
+        "types": "./dist/components/ui/*.d.cts",
+        "default": "./dist/components/ui/*.cjs"
+      }
     },
     "./lib/*": {
-      "types": "./dist/lib/*.d.ts",
-      "import": "./dist/lib/*.js"
+      "import": {
+        "types": "./dist/lib/*.d.ts",
+        "default": "./dist/lib/*.js"
+      },
+      "require": {
+        "types": "./dist/lib/*.d.cts",
+        "default": "./dist/lib/*.cjs"
+      }
     },
     "./hooks/*": {
-      "types": "./dist/hooks/*.d.ts",
-      "import": "./dist/hooks/*.js"
+      "import": {
+        "types": "./dist/hooks/*.d.ts",
+        "default": "./dist/hooks/*.js"
+      },
+      "require": {
+        "types": "./dist/hooks/*.d.cts",
+        "default": "./dist/hooks/*.cjs"
+      }
     },
-    "./styles.css": "./src/styles/globals.css",
+    "./lib/highlighter": {
+      "import": {
+        "types": "./dist/lib/highlighter.d.ts",
+        "default": "./dist/lib/highlighter.js"
+      }
+    },
+    "./hooks/use-highlighted-code": {
+      "import": {
+        "types": "./dist/hooks/use-highlighted-code.d.ts",
+        "default": "./dist/hooks/use-highlighted-code.js"
+      }
+    },
+    "./styles.css": "./dist/styles/globals.css",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@shadcn/react": "^0.3.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
     "lucide-react": ">=0.4 <2",
     "react": "^19.0.0",
+    "react-day-picker": "^10.0.2",
     "react-dom": "^19.0.0",
-    "tailwindcss": "^4.0.0"
+    "react-resizable-panels": "^4.15.0",
+    "recharts": "3.8.0",
+    "shiki": "^4.5.0",
+    "sonner": "^2.0.8",
+    "tailwindcss": "^4.0.0",
+    "vaul": "^1.1.2"
   },
   "peerDependenciesMeta": {
-    "tailwindcss": {
+    "@base-ui/react": {
+      "optional": true
+    },
+    "@shadcn/react": {
+      "optional": true
+    },
+    "cmdk": {
+      "optional": true
+    },
+    "embla-carousel-react": {
+      "optional": true
+    },
+    "input-otp": {
       "optional": true
     },
     "lucide-react": {
       "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    },
+    "vaul": {
+      "optional": true
     }
   },
   "engines": {
@@ -70,11 +149,13 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
+    "@base-ui/react": "^1.9.0",
     "@eslint/js": "^10.0.1",
     "@fontsource/jetbrains-mono": "^5.3.0",
     "@fontsource/lato": "^5.3.0",
     "@fontsource/lora": "^5.3.0",
     "@fontsource/playfair-display": "^5.3.0",
+    "@shadcn/react": "^0.3.1",
     "@storybook/addon-a11y": "10.6.5",
     "@storybook/addon-docs": "10.6.5",
     "@storybook/addon-themes": "10.6.5",
@@ -91,6 +172,8 @@
     "@vitejs/plugin-react": "^6.1.2",
     "@vitest/browser-playwright": "^5.0.5",
     "@vitest/coverage-v8": "^5.0.5",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
     "eslint": "^10.13.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import-x": "^4.17.1",
@@ -99,6 +182,7 @@
     "eslint-plugin-testing-library": "^7.16.2",
     "globals": "^17.13.0",
     "husky": "^9.1.7",
+    "input-otp": "^1.5.0",
     "jsdom": "^30.1.3",
     "lint-staged": "^17.6.0",
     "playwright": "^1.64.1",
@@ -106,38 +190,32 @@
     "prettier-plugin-tailwindcss": "^0.8.1",
     "publint": "^0.3.25",
     "react": "^19.3.1",
+    "react-day-picker": "^10.0.2",
     "react-dom": "^19.3.1",
+    "react-resizable-panels": "^4.15.0",
+    "recharts": "3.8.0",
     "shadcn": "^4.23.0",
+    "shiki": "^4.5.0",
+    "sonner": "^2.0.8",
     "storybook": "10.6.5",
     "tailwindcss": "^4.0.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.72.1",
+    "vaul": "^1.1.2",
     "vite": "^8.3.5",
     "vitest": "^5.0.5"
   },
   "dependencies": {
-    "@base-ui/react": "^1.9.0",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@shadcn/react": "^0.3.1",
     "class-variance-authority": "^0.7.1",
-    "cmdk": "^1.1.1",
     "cn": "^0.5.0",
-    "date-fns": "^4.4.0",
-    "embla-carousel-react": "^8.6.0",
-    "input-otp": "^1.5.0",
     "radix-ui": "^1.8.1",
-    "react-day-picker": "^10.0.2",
-    "react-resizable-panels": "^4.15.0",
-    "recharts": "3.8.0",
-    "shiki": "^4.5.0",
-    "sonner": "^2.0.8",
-    "tw-animate-css": "^1.4.0",
-    "vaul": "^1.1.2"
+    "tw-animate-css": "^1.4.0"
   },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "vite build && tsc -p tsconfig.build.json && node scripts/fix-declarations.mjs",
+    "build": "node scripts/build.mjs",
     "build:storybook": "storybook build",
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --fix",
@@ -148,9 +226,10 @@
     "test:watch": "vitest --project=unit",
     "test:stories": "vitest run --project=storybook",
     "test:coverage": "vitest run --project=unit --coverage",
-    "verify:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css",
-    "verify": "pnpm lint && pnpm tsc && pnpm test && pnpm build && pnpm verify:package",
+    "verify:package": "publint && attw --pack . --profile node16 --exclude-entrypoints ./styles.css ./lib/highlighter ./hooks/use-highlighted-code",
+    "verify": "pnpm lint && pnpm tsc && pnpm test && pnpm build && pnpm test:package && pnpm verify:package",
     "style": "node scripts/apply-house-style.mjs && prettier --write \"src/components/ui/**/*.tsx\"",
-    "barrel": "node scripts/generate-barrel.mjs"
+    "barrel": "node scripts/generate-barrel.mjs",
+    "test:package": "node scripts/test-package.mjs"
   }
 }