@openpkg-ts/ui 0.1.6 → 0.1.7

package/src/styles/tokens.css

@@ -0,0 +1,232 @@
+/**
+ * Design tokens for Supabase/Stripe-style API documentation.
+ * Rose Pine inspired syntax highlighting with dark theme.
+ */
+
+:root {
+  /* Background colors (dark-first) */
+  --openpkg-bg-root: #0c0c0c;
+  --openpkg-bg-primary: #0f0f0f;
+  --openpkg-bg-secondary: #171717;
+  --openpkg-bg-tertiary: #1c1c1c;
+  --openpkg-bg-code: #0f0f18;
+  --openpkg-bg-code-header: #141420;
+  --openpkg-bg-badge: #262626;
+  --openpkg-bg-chip: transparent;
+  --openpkg-bg-chip-active: transparent;
+  --openpkg-bg-collapsible: #161616;
+  --openpkg-bg-details: #141414;
+
+  /* Text colors */
+  --openpkg-text-primary: #ededed;
+  --openpkg-text-secondary: #a0a0a0;
+  --openpkg-text-muted: #666666;
+  --openpkg-text-code: #e4e4e7;
+
+  /* Syntax highlighting - Rose Pine */
+  --openpkg-syn-keyword: #c4a7e7;
+  --openpkg-syn-string: #9ccfd8;
+  --openpkg-syn-function: #ebbcba;
+  --openpkg-syn-property: #c4a7e7;
+  --openpkg-syn-variable: #e4e4e7;
+  --openpkg-syn-punctuation: #6e6a86;
+  --openpkg-syn-number: #f6c177;
+  --openpkg-syn-boolean: #eb6f92;
+  --openpkg-syn-comment: #6e6a86;
+
+  /* Accent colors */
+  --openpkg-accent-green: #3ecf8e;
+  --openpkg-accent-blue: #6cb6ff;
+  --openpkg-accent-purple: #c4a7e7;
+  --openpkg-accent-link: #6cb6ff;
+
+  /* Border colors */
+  --openpkg-border-subtle: #262626;
+  --openpkg-border-medium: #333333;
+  --openpkg-border-chip: #333333;
+  --openpkg-border-chip-active: #666666;
+
+  /* Typography */
+  --openpkg-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
+  --openpkg-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+
+  /* Border radius */
+  --openpkg-radius-sm: 4px;
+  --openpkg-radius-md: 6px;
+  --openpkg-radius-lg: 8px;
+  --openpkg-radius-full: 9999px;
+
+  /* Animations */
+  --openpkg-transition-fast: 150ms ease;
+  --openpkg-transition-normal: 200ms ease;
+  --openpkg-transition-slow: 300ms ease;
+
+  /* Responsive breakpoints (for reference) */
+  --openpkg-breakpoint-sm: 640px;
+  --openpkg-breakpoint-md: 768px;
+  --openpkg-breakpoint-lg: 1024px;
+  --openpkg-breakpoint-xl: 1280px;
+  --openpkg-breakpoint-2xl: 1536px;
+}
+
+/* =============================================================================
+   Dark Mode - Explicit .dark class
+============================================================================= */
+.dark,
+[data-theme="dark"] {
+  --openpkg-bg-root: #0c0c0c;
+  --openpkg-bg-primary: #0f0f0f;
+  --openpkg-bg-secondary: #171717;
+  --openpkg-bg-tertiary: #1c1c1c;
+  --openpkg-bg-code: #0f0f18;
+  --openpkg-bg-code-header: #141420;
+  --openpkg-bg-badge: #262626;
+  --openpkg-bg-collapsible: #161616;
+  --openpkg-bg-details: #141414;
+  --openpkg-text-primary: #ededed;
+  --openpkg-text-secondary: #a0a0a0;
+  --openpkg-text-muted: #666666;
+  --openpkg-text-code: #e4e4e7;
+  --openpkg-border-subtle: #262626;
+  --openpkg-border-medium: #333333;
+  --openpkg-border-chip: #333333;
+  --openpkg-border-chip-active: #666666;
+}
+
+/* =============================================================================
+   Light Mode - Explicit .light class
+============================================================================= */
+.light,
+[data-theme="light"] {
+  --openpkg-bg-root: #ffffff;
+  --openpkg-bg-primary: #fafafa;
+  --openpkg-bg-secondary: #f5f5f5;
+  --openpkg-bg-tertiary: #eeeeee;
+  --openpkg-bg-code: #f8f8fc;
+  --openpkg-bg-code-header: #f0f0f8;
+  --openpkg-bg-badge: #e5e5e5;
+  --openpkg-bg-collapsible: #f8f8f8;
+  --openpkg-bg-details: #fafafa;
+  --openpkg-text-primary: #1a1a1a;
+  --openpkg-text-secondary: #525252;
+  --openpkg-text-muted: #737373;
+  --openpkg-text-code: #1a1a1a;
+  --openpkg-border-subtle: #e5e5e5;
+  --openpkg-border-medium: #d4d4d4;
+  --openpkg-border-chip: #d4d4d4;
+  --openpkg-border-chip-active: #a3a3a3;
+
+  /* Light mode syntax - adjust for readability */
+  --openpkg-syn-keyword: #8b5cf6;
+  --openpkg-syn-string: #059669;
+  --openpkg-syn-function: #dc2626;
+  --openpkg-syn-property: #7c3aed;
+  --openpkg-syn-variable: #1a1a1a;
+  --openpkg-syn-punctuation: #6b7280;
+  --openpkg-syn-number: #d97706;
+  --openpkg-syn-boolean: #be185d;
+  --openpkg-syn-comment: #9ca3af;
+}
+
+/* =============================================================================
+   System Preference (when no explicit class)
+============================================================================= */
+@media (prefers-color-scheme: light) {
+  :root:not(.dark):not([data-theme="dark"]) {
+    --openpkg-bg-root: #ffffff;
+    --openpkg-bg-primary: #fafafa;
+    --openpkg-bg-secondary: #f5f5f5;
+    --openpkg-bg-tertiary: #eeeeee;
+    --openpkg-bg-code: #f8f8fc;
+    --openpkg-bg-code-header: #f0f0f8;
+    --openpkg-bg-badge: #e5e5e5;
+    --openpkg-bg-collapsible: #f8f8f8;
+    --openpkg-bg-details: #fafafa;
+    --openpkg-text-primary: #1a1a1a;
+    --openpkg-text-secondary: #525252;
+    --openpkg-text-muted: #737373;
+    --openpkg-text-code: #1a1a1a;
+    --openpkg-border-subtle: #e5e5e5;
+    --openpkg-border-medium: #d4d4d4;
+    --openpkg-border-chip: #d4d4d4;
+    --openpkg-border-chip-active: #a3a3a3;
+    --openpkg-syn-keyword: #8b5cf6;
+    --openpkg-syn-string: #059669;
+    --openpkg-syn-function: #dc2626;
+    --openpkg-syn-property: #7c3aed;
+    --openpkg-syn-variable: #1a1a1a;
+    --openpkg-syn-punctuation: #6b7280;
+    --openpkg-syn-number: #d97706;
+    --openpkg-syn-boolean: #be185d;
+    --openpkg-syn-comment: #9ca3af;
+  }
+}
+
+/* =============================================================================
+   Animation Keyframes
+============================================================================= */
+@keyframes openpkg-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes openpkg-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes openpkg-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes openpkg-expand {
+  from {
+    opacity: 0;
+    height: 0;
+  }
+  to {
+    opacity: 1;
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes openpkg-collapse {
+  from {
+    opacity: 1;
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    opacity: 0;
+    height: 0;
+  }
+}
+
+/* Utility classes for animations */
+.openpkg-animate-fade-in {
+  animation: openpkg-fade-in var(--openpkg-transition-normal) ease-out;
+}
+
+.openpkg-animate-slide-down {
+  animation: openpkg-slide-down var(--openpkg-transition-normal) ease-out;
+}
+
+.openpkg-animate-slide-up {
+  animation: openpkg-slide-up var(--openpkg-transition-normal) ease-out;
+}

package/dist/api/index.d.ts

@@ -1,114 +0,0 @@
-import { ReactNode as ReactNode2 } from "react";
-interface CodeTab {
-	/** Tab label */
-	label: string;
-	/** Tab content (code block) */
-	content: ReactNode2;
-	/** Raw code for copy button */
-	code: string;
-}
-interface CodeTabsProps {
-	/** Array of tabs */
-	tabs: CodeTab[];
-	/** Default selected tab index */
-	defaultIndex?: number;
-	/** Enable sticky positioning for the header */
-	sticky?: boolean;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Tabbed code block wrapper with copy button per tab.
-* Uses docskit --dk-* CSS variables for consistent theming.
-*/
-declare function CodeTabs({ tabs, defaultIndex, sticky, className }: CodeTabsProps): React.ReactNode2;
-import * as React2 from "react";
-type ExportKind = "function" | "type" | "variable" | "class" | "interface" | "enum";
-/**
-* Kind badge variants for export cards.
-*/
-declare const kindBadgeVariants: (props?: {
-	kind?: ExportKind | null;
-	className?: string;
-}) => string;
-interface ExportCardProps extends React2.AnchorHTMLAttributes<HTMLAnchorElement> {
-	/** Export name */
-	name: string;
-	/** Description snippet */
-	description?: string;
-	/** Link to detail page */
-	href: string;
-	/** Export kind */
-	kind?: ExportKind | null;
-	/** Custom link component (for Next.js Link) */
-	as?: React2.ElementType;
-}
-/**
-* Card component for displaying exports in an index grid.
-* Features function name styling, description, kind badge, and hover effects.
-*/
-declare const ExportCard: React2.ForwardRefExoticComponent<ExportCardProps & React2.RefAttributes<HTMLAnchorElement>>;
-interface ImportSectionProps {
-	/** Import statement text */
-	importStatement: string;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Displays a copyable import statement with one-click copy.
-* Monospace styling with copy button.
-*/
-declare function ImportSection({ importStatement, className }: ImportSectionProps): React.ReactNode;
-interface ParameterSchema {
-	/** Type name (e.g., "string", "number", "object") */
-	type?: string;
-	/** Formatted type string for display */
-	typeString?: string;
-	/** Description of the parameter/property */
-	description?: string;
-	/** Nested properties for object types */
-	properties?: Record<string, ParameterSchema>;
-	/** Required property names */
-	required?: string[];
-}
-interface ParameterItemProps {
-	/** Parameter name */
-	name: string;
-	/** Parameter schema */
-	schema: ParameterSchema;
-	/** Whether this parameter is required */
-	required?: boolean;
-	/** Description (overrides schema.description) */
-	description?: string;
-	/** Nesting depth for indentation */
-	depth?: number;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Single parameter with expand capability for nested objects.
-* Features expandable nested params, type annotations, and required/optional badges.
-*/
-declare function ParameterItem({ name, schema, required: isRequired, description, depth, className }: ParameterItemProps): React.ReactNode;
-import * as React3 from "react";
-type TypeColor = "string" | "number" | "boolean" | "null" | "undefined" | "object" | "array" | "function" | "union" | "generic" | "default";
-/**
-* Type coloring for syntax display.
-* Follows Stripe-style: consistent colors for primitives vs complex types.
-*/
-declare const typeBadgeVariants: (props?: {
-	typeColor?: TypeColor | null;
-	className?: string;
-}) => string;
-interface TypeBadgeProps extends React3.HTMLAttributes<HTMLSpanElement> {
-	/** Type string to display */
-	type: string;
-	/** Override color detection */
-	typeColor?: TypeColor | null;
-}
-/**
-* Inline type display with syntax coloring.
-* Automatically detects type category and applies appropriate color.
-*/
-declare const TypeBadge: React3.ForwardRefExoticComponent<TypeBadgeProps & React3.RefAttributes<HTMLSpanElement>>;
-export { typeBadgeVariants, kindBadgeVariants, TypeBadgeProps, TypeBadge, ParameterSchema, ParameterItemProps, ParameterItem, ImportSectionProps, ImportSection, ExportKind, ExportCardProps, ExportCard, CodeTabsProps, CodeTabs, CodeTab };