@openpkg-ts/ui 0.5.1 → 0.5.2

package/dist/badge/index.d.ts

@@ -1,7 +1,12 @@
 import * as React from "react";
 type KindBadgeKind = "function" | "class" | "interface" | "type" | "enum" | "variable" | "namespace" | "module" | "reference" | "external";
 type KindBadgeSize = "sm" | "md";
-declare const kindBadgeVariants: unknown;
+declare const kindBadgeVariants: (props?: {
+	kind?: KindBadgeKind | null;
+	size?: KindBadgeSize | null;
+	class?: string;
+	className?: string;
+}) => string;
 interface KindBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 	kind?: KindBadgeKind | null;
 	size?: KindBadgeSize | null;
@@ -10,7 +15,12 @@ interface KindBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare const KindBadge: React.ForwardRefExoticComponent<KindBadgeProps & React.RefAttributes<HTMLSpanElement>>;
 type StatusBadgeStatus = "success" | "warning" | "error" | "neutral";
 type StatusBadgeSize = "sm" | "md";
-declare const statusBadgeVariants: unknown;
+declare const statusBadgeVariants: (props?: {
+	status?: StatusBadgeStatus | null;
+	size?: StatusBadgeSize | null;
+	class?: string;
+	className?: string;
+}) => string;
 interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 	status?: StatusBadgeStatus | null;
 	size?: StatusBadgeSize | null;

package/dist/docskit/index.d.ts

@@ -145,7 +145,12 @@ declare function CollapsiblePanel({ title, children, defaultExpanded, expanded:
 import * as React6 from "react";
 type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
 type EndpointBadgeSize = "sm" | "md";
-declare const endpointBadgeVariants: unknown;
+declare const endpointBadgeVariants: (props?: {
+	method?: HttpMethod | null;
+	size?: EndpointBadgeSize | null;
+	class?: string;
+	className?: string;
+}) => string;
 interface EndpointBadgeProps extends React6.HTMLAttributes<HTMLSpanElement> {
 	method: HttpMethod;
 	size?: EndpointBadgeSize | null;
@@ -664,7 +669,11 @@ type TypeColor = "string" | "number" | "boolean" | "null" | "undefined" | "objec
 * Type coloring for syntax display.
 * Follows Stripe-style: consistent colors for primitives vs complex types.
 */
-declare const typeBadgeVariants: unknown;
+declare const typeBadgeVariants: (props?: {
+	typeColor?: TypeColor | null;
+	class?: string;
+	className?: string;
+}) => string;
 interface TypeBadgeProps extends React13.HTMLAttributes<HTMLSpanElement> {
 	/** Type string to display */
 	type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpkg-ts/ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "UI primitives and components for OpenPkg documentation",
   "homepage": "https://github.com/ryanwaits/openpkg-ts#readme",
   "repository": {

package/src/styles/docskit.css

@@ -6,8 +6,40 @@
  * Usage: @import '@openpkg-ts/ui/styles/docskit.css';
  */
 
-/* CodeHike custom theme (dark) */
+/* CodeHike custom theme (light default) */
 :root {
+  --ch-0: light;
+  --ch-1: #999999;
+  --ch-2: #c9555a;
+  --ch-3: #3a3a3a;
+  --ch-4: #3a3a3a;
+  --ch-5: #7c3aed;
+  --ch-6: #b8860b;
+  --ch-7: #c9555a;
+  --ch-8: #b8860b;
+  --ch-9: #c9555a;
+  --ch-10: #ebebeb;
+  --ch-11: #fde8e8;
+  --ch-12: #e8f5e8;
+  --ch-13: #fdf0d5;
+  --ch-14: #e8e8e8;
+  --ch-15: #999999;
+  --ch-16: #f5f5f5;
+  --ch-17: #d0d0d080;
+  --ch-18: #fdff0033;
+  --ch-19: #c9555a;
+  --ch-20: #d0d0e0;
+  --ch-21: #c9555a;
+  --ch-22: #ebebeb;
+  --ch-23: #e0e0e0;
+  --ch-24: #b0b0b0;
+  --ch-25: #b0b0b033;
+  --ch-26: #f5f5f5e6;
+}
+
+/* CodeHike custom theme (dark) — explicit class or data attribute */
+.dark,
+[data-theme="dark"] {
   --ch-0: dark;
   --ch-1: #5c5c5c;
   --ch-2: #c9555a;
@@ -37,36 +69,37 @@
   --ch-26: #1a1a1ae6;
 }
 
-/* CodeHike custom theme (light) */
-.light,
-[data-theme="light"] {
-  --ch-0: light;
-  --ch-1: #999999;
-  --ch-2: #c9555a;
-  --ch-3: #3a3a3a;
-  --ch-4: #3a3a3a;
-  --ch-5: #7c3aed;
-  --ch-6: #b8860b;
-  --ch-7: #c9555a;
-  --ch-8: #b8860b;
-  --ch-9: #c9555a;
-  --ch-10: #ebebeb;
-  --ch-11: #fde8e8;
-  --ch-12: #e8f5e8;
-  --ch-13: #fdf0d5;
-  --ch-14: #e8e8e8;
-  --ch-15: #999999;
-  --ch-16: #f5f5f5;
-  --ch-17: #d0d0d080;
-  --ch-18: #fdff0033;
-  --ch-19: #c9555a;
-  --ch-20: #d0d0e0;
-  --ch-21: #c9555a;
-  --ch-22: #ebebeb;
-  --ch-23: #e0e0e0;
-  --ch-24: #b0b0b0;
-  --ch-25: #b0b0b033;
-  --ch-26: #f5f5f5e6;
+/* CodeHike dark theme — system preference */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not([data-theme="light"]) {
+    --ch-0: dark;
+    --ch-1: #5c5c5c;
+    --ch-2: #c9555a;
+    --ch-3: #d4d4d4;
+    --ch-4: #d4d4d4;
+    --ch-5: #c4a7e7;
+    --ch-6: #d4a553;
+    --ch-7: #c9555a;
+    --ch-8: #d4a553;
+    --ch-9: #c9555a;
+    --ch-10: #2a2a2a;
+    --ch-11: #3a1515;
+    --ch-12: #1a2a1a;
+    --ch-13: #3a2a15;
+    --ch-14: #1e1e1e;
+    --ch-15: #5c5c5c;
+    --ch-16: #1a1a1a;
+    --ch-17: #3a3a3a1a;
+    --ch-18: #ffffff0b;
+    --ch-19: #c9555a;
+    --ch-20: #3a3a5a;
+    --ch-21: #c9555a;
+    --ch-22: #141414;
+    --ch-23: #2a2a2a;
+    --ch-24: #4a4a4a;
+    --ch-25: #4a4a4a66;
+    --ch-26: #1a1a1ae6;
+  }
 }
 
 /* openpkg-code-* Tailwind v4 color theme (maps to --ch-* vars) */