@n3rd-ai/ui 0.1.0

package/dist/index.css

@@ -0,0 +1,281 @@
+/* src/components/layout/Box.module.css */
+.box {
+  font-family: var(--n3rd-font);
+  color: var(--box-border-color, var(--n3rd-border-default));
+  width: 100%;
+}
+.borderTop,
+.borderBottom {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.borderChar {
+  flex-shrink: 0;
+}
+.borderLine {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.borderLine::before {
+  content: "\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500";
+  display: block;
+  overflow: hidden;
+}
+.title {
+  flex-shrink: 0;
+  color: var(--n3rd-text-secondary);
+  font-size: var(--n3rd-text-sm);
+}
+.content {
+  display: flex;
+}
+.borderSide {
+  flex-shrink: 0;
+}
+.inner {
+  flex: 1;
+  padding: var(--box-padding, var(--n3rd-space-4));
+  color: var(--n3rd-text-primary);
+}
+
+/* src/components/display/Footer.module.css */
+.footer {
+  font-family: var(--n3rd-font);
+  text-align: center;
+  padding: var(--n3rd-space-8) 0 var(--n3rd-space-6);
+  overflow: hidden;
+}
+.branding {
+  color: var(--n3rd-text-tertiary);
+  font-size: var(--n3rd-text-xs);
+  margin-bottom: var(--n3rd-space-6);
+  letter-spacing: 0.1em;
+}
+.starfield {
+  color: var(--n3rd-accent-lavender);
+  font-size: var(--n3rd-text-sm);
+  line-height: 1.8;
+  opacity: 0.4;
+  margin-bottom: var(--n3rd-space-4);
+}
+.starRow {
+  white-space: pre;
+}
+.sunset {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 0;
+}
+.sunLine {
+  height: 6px;
+  border-radius: 0;
+  margin: 1px 0;
+}
+.sunGap {
+  height: 2px;
+}
+.horizon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: var(--n3rd-space-6);
+}
+.horizonBright {
+  width: 100%;
+  height: 1px;
+  background: var(--n3rd-accent-rose);
+  opacity: 0.8;
+  margin-bottom: var(--n3rd-space-2);
+}
+.reflection {
+  width: 80%;
+  height: 1px;
+  background: var(--n3rd-accent-pink);
+  opacity: 0.3;
+  margin-bottom: var(--n3rd-space-2);
+}
+.reflectionDashed {
+  width: 70%;
+  height: 1px;
+  background:
+    repeating-linear-gradient(
+      90deg,
+      var(--n3rd-accent-pink) 0px,
+      var(--n3rd-accent-pink) 8px,
+      transparent 8px,
+      transparent 16px);
+  opacity: 0.2;
+  margin-bottom: var(--n3rd-space-3);
+}
+.tagline {
+  color: var(--n3rd-text-secondary);
+  font-size: var(--n3rd-text-sm);
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  margin-bottom: var(--n3rd-space-4);
+}
+.links {
+  font-size: var(--n3rd-text-xs);
+}
+.link {
+  color: var(--n3rd-text-tertiary);
+  text-decoration: none;
+}
+.link:hover {
+  color: var(--n3rd-accent-cyan);
+}
+.sep {
+  color: var(--n3rd-border-muted);
+}
+
+/* src/components/input/Button.module.css */
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n3rd-space-1);
+  font-family: var(--n3rd-font);
+  font-size: var(--n3rd-text-base);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+  text-decoration: none;
+  border: none;
+  background: none;
+  padding: var(--n3rd-space-1) var(--n3rd-space-2);
+}
+.primary {
+  color: var(--n3rd-accent-primary);
+}
+.primary:hover {
+  background: var(--n3rd-accent-primary);
+  color: var(--n3rd-bg-primary);
+}
+.secondary {
+  color: var(--n3rd-text-secondary);
+}
+.secondary:hover {
+  color: var(--n3rd-text-primary);
+}
+.danger {
+  color: var(--n3rd-accent-danger);
+}
+.danger:hover {
+  background: var(--n3rd-accent-danger);
+  color: var(--n3rd-bg-primary);
+}
+.ghost {
+  color: var(--n3rd-text-secondary);
+  padding: var(--n3rd-space-1) 0;
+}
+.ghost:hover {
+  color: var(--n3rd-text-primary);
+}
+.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.loading {
+  cursor: wait;
+}
+.spinner {
+  display: inline-block;
+  animation: n3rd-spin 0.8s steps(10) infinite;
+  margin-right: var(--n3rd-space-1);
+}
+@keyframes n3rd-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* src/components/input/Input.module.css */
+.wrapper {
+  font-family: var(--n3rd-font);
+}
+.label {
+  display: block;
+  color: var(--n3rd-text-secondary);
+  font-size: var(--n3rd-text-sm);
+  margin-bottom: var(--n3rd-space-1);
+}
+.field {
+  display: flex;
+  align-items: center;
+  gap: var(--n3rd-space-2);
+  padding: var(--n3rd-space-2);
+  background: var(--n3rd-bg-secondary);
+  border: 1px solid var(--n3rd-border-default);
+  cursor: text;
+}
+.focused {
+  border-color: var(--n3rd-border-focus);
+}
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.prefix {
+  color: var(--n3rd-accent-primary);
+  flex-shrink: 0;
+  user-select: none;
+}
+.inputWrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.input {
+  flex: 1;
+  font-family: var(--n3rd-font);
+  font-size: var(--n3rd-text-base);
+  color: var(--n3rd-text-primary);
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  caret-color: transparent;
+}
+.input::placeholder {
+  color: var(--n3rd-text-tertiary);
+}
+
+/* src/components/nav/Nav.module.css */
+.nav {
+  display: flex;
+  align-items: center;
+  padding: var(--n3rd-space-3) var(--n3rd-space-4);
+  font-family: var(--n3rd-font);
+  font-size: var(--n3rd-text-sm);
+  border-bottom: 1px solid var(--n3rd-border-muted);
+}
+.items {
+  display: flex;
+  align-items: center;
+  gap: var(--n3rd-space-2);
+  flex-wrap: wrap;
+}
+.item {
+  color: var(--n3rd-text-secondary);
+  text-decoration: none;
+  transition: color 0.15s;
+  white-space: nowrap;
+}
+.item:hover {
+  color: var(--n3rd-text-primary);
+}
+.active {
+  color: var(--n3rd-accent-primary);
+}
+.active:hover {
+  color: var(--n3rd-accent-primary);
+}
+.indicator {
+  color: var(--n3rd-accent-primary);
+}

package/dist/index.d.ts

@@ -0,0 +1,290 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties, MouseEvent } from 'react';
+import { B as BorderStyle } from './ascii-border-DpKIQMLP.js';
+export { a as BORDER_CHARS, g as getBorderChars } from './ascii-border-DpKIQMLP.js';
+export { T as ToastProvider, u as useToast } from './Toast-qHlZE8FW.js';
+import * as next_dist_compiled__next_font from 'next/dist/compiled/@next/font';
+
+type Accent$3 = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+type Padding = 'none' | 'sm' | 'md' | 'lg';
+interface BoxProps {
+    children: ReactNode;
+    border?: BorderStyle;
+    title?: string;
+    accent?: Accent$3;
+    padding?: Padding;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Box({ children, border, title, accent, padding, className, style, }: BoxProps): react_jsx_runtime.JSX.Element;
+
+type Gap$2 = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+interface StackProps {
+    children: ReactNode;
+    gap?: Gap$2;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Stack({ children, gap, align, className, style }: StackProps): react_jsx_runtime.JSX.Element;
+
+type Gap$1 = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+interface RowProps {
+    children: ReactNode;
+    gap?: Gap$1;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    wrap?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Row({ children, gap, align, justify, wrap, className, style, }: RowProps): react_jsx_runtime.JSX.Element;
+
+type Gap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+interface GridProps {
+    children: ReactNode;
+    columns?: number | string;
+    gap?: Gap;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Grid({ children, columns, gap, className, style }: GridProps): react_jsx_runtime.JSX.Element;
+
+interface DividerProps {
+    variant?: 'single' | 'double' | 'dashed';
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Divider({ variant, label, className, style }: DividerProps): react_jsx_runtime.JSX.Element;
+
+interface PageProps {
+    children: ReactNode;
+    maxWidth?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Page({ children, maxWidth, className, style }: PageProps): react_jsx_runtime.JSX.Element;
+
+type Size = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+type Color = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+interface TextProps {
+    children: ReactNode;
+    size?: Size;
+    color?: Color;
+    bold?: boolean;
+    prefix?: string;
+    gradient?: boolean;
+    as?: 'span' | 'p' | 'div';
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Text({ children, size, color, bold, prefix, gradient, as: Tag, className, style, }: TextProps): react_jsx_runtime.JSX.Element;
+
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+interface HeadingProps {
+    children: ReactNode;
+    level?: Level;
+    prefix?: boolean;
+    gradient?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Heading({ children, level, prefix, gradient, className, style, }: HeadingProps): react_jsx_runtime.JSX.Element;
+
+type Variant$2 = 'default' | 'success' | 'warning' | 'danger' | 'info';
+interface BadgeProps {
+    children: string;
+    variant?: Variant$2;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Badge({ children, variant, className, style }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type Accent$2 = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+interface MetricProps {
+    value: string | number;
+    label: string;
+    suffix?: string;
+    prefix?: string;
+    accent?: Accent$2;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Metric({ value, label, suffix, prefix, accent, className, style }: MetricProps): react_jsx_runtime.JSX.Element;
+
+type Accent$1 = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+type CellValue = string | {
+    text: string;
+    accent?: Accent$1;
+};
+interface TableProps {
+    columns: string[];
+    rows: CellValue[][];
+    border?: BorderStyle;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Table({ columns, rows, border, className, style }: TableProps): react_jsx_runtime.JSX.Element;
+
+interface CodeProps {
+    children: string;
+    title?: string;
+    prompt?: string;
+    showLineNumbers?: boolean;
+    border?: BorderStyle;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Code({ children, title, prompt, showLineNumbers, border, className, style, }: CodeProps): react_jsx_runtime.JSX.Element;
+
+type Bullet = '>' | '-' | '*' | 'numbered' | 'none';
+interface ListProps {
+    items: ReactNode[];
+    bullet?: Bullet;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function List({ items, bullet, className, style }: ListProps): react_jsx_runtime.JSX.Element;
+
+type Accent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'violet' | 'purple' | 'lavender' | 'pink' | 'rose' | 'cyan' | 'aqua';
+interface LogoProps {
+    text: string;
+    gradient?: boolean | string;
+    accent?: Accent;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Logo({ text, gradient, accent, className, style }: LogoProps): react_jsx_runtime.JSX.Element;
+
+interface StatusLineProps {
+    left?: ReactNode;
+    center?: ReactNode;
+    right?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function StatusLine({ left, center, right, className, style }: StatusLineProps): react_jsx_runtime.JSX.Element;
+
+interface FooterLink {
+    label: string;
+    href: string;
+    external?: boolean;
+}
+interface FooterProps {
+    tagline?: string;
+    links?: FooterLink[];
+    branding?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Footer({ tagline, links, branding, className, style, }: FooterProps): react_jsx_runtime.JSX.Element;
+
+type Variant$1 = 'primary' | 'secondary' | 'danger' | 'ghost';
+interface ButtonProps {
+    children: ReactNode;
+    variant?: Variant$1;
+    href?: string;
+    external?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    className?: string;
+    style?: CSSProperties;
+    type?: 'button' | 'submit' | 'reset';
+}
+declare function Button({ children, variant, href, external, loading, disabled, onClick, className, style, type, }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type CursorStyle = 'block' | 'line' | 'underscore';
+interface CursorProps {
+    style?: CursorStyle;
+    className?: string;
+}
+declare function Cursor({ style, className }: CursorProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    prefix?: string;
+    cursor?: CursorStyle;
+    type?: 'text' | 'email' | 'password' | 'url' | 'number';
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    name?: string;
+    id?: string;
+}
+declare function Input({ label, placeholder, value: controlledValue, defaultValue, onChange, onSubmit, prefix, cursor, type, disabled, className, style, name, id, }: InputProps): react_jsx_runtime.JSX.Element;
+
+type Variant = 'success' | 'warning' | 'error' | 'info';
+interface AlertProps {
+    children: ReactNode;
+    variant?: Variant;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Alert({ children, variant, className, style }: AlertProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressProps {
+    value: number;
+    max?: number;
+    width?: number;
+    showLabel?: boolean;
+    accent?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Progress({ value, max, width, showLabel, accent, className, style, }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+interface SkeletonProps {
+    width?: number;
+    lines?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Skeleton({ width, lines, className, style }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface NavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+    external?: boolean;
+}
+interface NavProps {
+    items: NavItem[];
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Nav({ items, className, style }: NavProps): react_jsx_runtime.JSX.Element;
+
+interface TypewriterProps {
+    text: string;
+    speed?: number;
+    delay?: number;
+    cursor?: CursorStyle | false;
+    onComplete?: () => void;
+    className?: string;
+}
+declare function Typewriter({ text, speed, delay, cursor, onComplete, className, }: TypewriterProps): react_jsx_runtime.JSX.Element;
+
+interface ScanlineProps {
+    opacity?: number;
+}
+declare function Scanline({ opacity }: ScanlineProps): react_jsx_runtime.JSX.Element;
+
+interface N3rdProviderProps {
+    children: ReactNode;
+    theme?: 'unicorn' | 'classic' | 'retro' | 'paper';
+    scanlines?: boolean;
+    toastDuration?: number;
+}
+declare function N3rdProvider({ children, scanlines, toastDuration, }: N3rdProviderProps): react_jsx_runtime.JSX.Element;
+
+declare const jetbrainsMono: next_dist_compiled__next_font.NextFontWithVariable;
+declare const N3rdFonts: next_dist_compiled__next_font.NextFontWithVariable;
+
+export { Alert, type AlertProps, Badge, type BadgeProps, BorderStyle, Box, type BoxProps, Button, type ButtonProps, Code, type CodeProps, Cursor, type CursorProps, type CursorStyle, Divider, type DividerProps, Footer, type FooterProps, Grid, type GridProps, Heading, type HeadingProps, Input, type InputProps, List, type ListProps, Logo, type LogoProps, Metric, type MetricProps, N3rdFonts, N3rdProvider, type N3rdProviderProps, Nav, type NavProps, Page, type PageProps, Progress, type ProgressProps, Row, type RowProps, Scanline, type ScanlineProps, Skeleton, type SkeletonProps, Stack, type StackProps, StatusLine, type StatusLineProps, Table, type TableProps, Text, type TextProps, Typewriter, type TypewriterProps, jetbrainsMono };