@bizbasics/ui 0.1.0

package/src/components/Card.tsx

@@ -0,0 +1,68 @@
+import type { CSSProperties, ReactNode } from "react";
+
+interface CardProps {
+  children: ReactNode;
+  style?: CSSProperties;
+  padding?: number | string;
+  noBorder?: boolean;
+  noShadow?: boolean;
+}
+
+interface CardHeaderProps {
+  title: string;
+  subtitle?: string;
+  action?: ReactNode;
+}
+
+export function Card({ children, style, padding = "24px", noBorder, noShadow }: CardProps) {
+  return (
+    <div style={{
+      background: "var(--bb-surface)",
+      border: noBorder ? "none" : "1px solid var(--bb-border)",
+      borderRadius: "var(--bb-radius-lg)",
+      boxShadow: noShadow ? "none" : "var(--bb-shadow-sm)",
+      padding,
+      ...style,
+    }}>
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ title, subtitle, action }: CardHeaderProps) {
+  return (
+    <div style={{
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      marginBottom: "20px",
+    }}>
+      <div>
+        <h2 style={{
+          margin: 0,
+          fontSize: "var(--bb-text-lg)",
+          fontWeight: 600,
+          color: "var(--bb-text-primary)",
+          lineHeight: 1.3,
+        }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p style={{
+            margin: "4px 0 0",
+            fontSize: "var(--bb-text-sm)",
+            color: "var(--bb-text-muted)",
+          }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {action}
+    </div>
+  );
+}
+
+/** Full-width horizontal divider for use inside cards */
+export function CardDivider() {
+  return <div style={{ height: "1px", background: "var(--bb-border-muted)", margin: "16px -24px" }} />;
+}

package/src/components/EmptyState.tsx

@@ -0,0 +1,49 @@
+import type { CSSProperties, ReactNode } from "react";
+
+interface Props {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+const wrapStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "48px 24px",
+  textAlign: "center",
+};
+
+export function EmptyState({ icon, title, description, action }: Props) {
+  return (
+    <div style={wrapStyle}>
+      {icon && (
+        <div style={{ fontSize: "40px", marginBottom: "16px", opacity: 0.45 }}>
+          {icon}
+        </div>
+      )}
+      <h3 style={{
+        margin: "0 0 6px",
+        fontSize: "var(--bb-text-md)",
+        fontWeight: 600,
+        color: "var(--bb-text-secondary)",
+      }}>
+        {title}
+      </h3>
+      {description && (
+        <p style={{
+          margin: "0 0 20px",
+          fontSize: "var(--bb-text-sm)",
+          color: "var(--bb-text-muted)",
+          maxWidth: "320px",
+          lineHeight: "1.5",
+        }}>
+          {description}
+        </p>
+      )}
+      {action}
+    </div>
+  );
+}

package/src/components/Input.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import type { CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from "react";
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+}
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+}
+
+const labelStyle: CSSProperties = {
+  display: "block",
+  fontSize: "var(--bb-text-sm)",
+  fontWeight: 500,
+  color: "var(--bb-text-secondary)",
+  marginBottom: "5px",
+};
+
+const inputBaseStyle: CSSProperties = {
+  width: "100%",
+  border: "1px solid var(--bb-border)",
+  borderRadius: "var(--bb-radius)",
+  padding: "9px 12px",
+  fontSize: "var(--bb-text-sm)",
+  fontFamily: "var(--bb-font-sans)",
+  color: "var(--bb-text-primary)",
+  background: "var(--bb-surface)",
+  outline: "none",
+  transition: "border-color var(--bb-transition), box-shadow var(--bb-transition)",
+};
+
+const hintStyle: CSSProperties = {
+  fontSize: "var(--bb-text-xs)",
+  color: "var(--bb-text-muted)",
+  marginTop: "4px",
+};
+
+const errorStyle: CSSProperties = {
+  fontSize: "var(--bb-text-xs)",
+  color: "var(--bb-error)",
+  marginTop: "4px",
+};
+
+export function Input({ label, error, hint, prefix, suffix, style, ...rest }: InputProps) {
+  return (
+    <div>
+      {label && <label style={labelStyle}>{label}</label>}
+      <div style={{ position: "relative", display: "flex", alignItems: "center" }}>
+        {prefix && (
+          <span style={{ position: "absolute", left: "12px", color: "var(--bb-text-muted)", display: "flex" }}>
+            {prefix}
+          </span>
+        )}
+        <input
+          style={{
+            ...inputBaseStyle,
+            paddingLeft: prefix ? "36px" : inputBaseStyle.padding as string,
+            paddingRight: suffix ? "36px" : inputBaseStyle.padding as string,
+            borderColor: error ? "var(--bb-error)" : "var(--bb-border)",
+            ...style,
+          }}
+          onFocus={(e) => {
+            e.currentTarget.style.borderColor = error ? "var(--bb-error)" : "var(--bb-brand)";
+            e.currentTarget.style.boxShadow = `0 0 0 3px ${error ? "rgba(220,38,38,0.12)" : "var(--bb-brand-ring)"}`;
+          }}
+          onBlur={(e) => {
+            e.currentTarget.style.borderColor = error ? "var(--bb-error)" : "var(--bb-border)";
+            e.currentTarget.style.boxShadow = "none";
+          }}
+          {...rest}
+        />
+        {suffix && (
+          <span style={{ position: "absolute", right: "12px", color: "var(--bb-text-muted)", display: "flex" }}>
+            {suffix}
+          </span>
+        )}
+      </div>
+      {error && <p style={errorStyle}>{error}</p>}
+      {hint && !error && <p style={hintStyle}>{hint}</p>}
+    </div>
+  );
+}
+
+export function Textarea({ label, error, hint, style, ...rest }: TextareaProps) {
+  return (
+    <div>
+      {label && <label style={labelStyle}>{label}</label>}
+      <textarea
+        style={{
+          ...inputBaseStyle,
+          resize: "vertical",
+          minHeight: "80px",
+          borderColor: error ? "var(--bb-error)" : "var(--bb-border)",
+          ...style,
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.borderColor = error ? "var(--bb-error)" : "var(--bb-brand)";
+          e.currentTarget.style.boxShadow = `0 0 0 3px ${error ? "rgba(220,38,38,0.12)" : "var(--bb-brand-ring)"}`;
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.borderColor = error ? "var(--bb-error)" : "var(--bb-border)";
+          e.currentTarget.style.boxShadow = "none";
+        }}
+        {...rest}
+      />
+      {error && <p style={errorStyle}>{error}</p>}
+      {hint && !error && <p style={hintStyle}>{hint}</p>}
+    </div>
+  );
+}
+
+export function Select({
+  label,
+  error,
+  hint,
+  style,
+  children,
+  ...rest
+}: React.SelectHTMLAttributes<HTMLSelectElement> & { label?: string; error?: string; hint?: string }) {
+  return (
+    <div>
+      {label && <label style={labelStyle}>{label}</label>}
+      <select
+        style={{
+          ...inputBaseStyle,
+          cursor: "pointer",
+          borderColor: error ? "var(--bb-error)" : "var(--bb-border)",
+          ...style,
+        }}
+        {...rest}
+      >
+        {children}
+      </select>
+      {error && <p style={errorStyle}>{error}</p>}
+      {hint && !error && <p style={hintStyle}>{hint}</p>}
+    </div>
+  );
+}

package/src/components/Modal.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useEffect, type CSSProperties, type ReactNode } from "react";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  width?: number | string;
+}
+
+const overlayStyle: CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  background: "rgba(0,0,0,0.55)",
+  backdropFilter: "blur(3px)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: "var(--bb-z-modal)" as unknown as number,
+  padding: "16px",
+};
+
+const dialogStyle: CSSProperties = {
+  background: "var(--bb-surface)",
+  border: "1px solid var(--bb-border)",
+  borderRadius: "var(--bb-radius-lg)",
+  boxShadow: "var(--bb-shadow-xl)",
+  display: "flex",
+  flexDirection: "column",
+  maxHeight: "calc(100vh - 64px)",
+  overflow: "hidden",
+  width: "100%",
+  animation: "bb-modal-in 0.15s ease",
+};
+
+export function Modal({ open, onClose, title, children, footer, width = 480 }: Props) {
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <>
+      <style>{`
+        @keyframes bb-modal-in {
+          from { opacity: 0; transform: scale(0.96) translateY(-6px); }
+          to   { opacity: 1; transform: scale(1) translateY(0); }
+        }
+      `}</style>
+      <div style={overlayStyle} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }} role="dialog" aria-modal>
+        <div style={{ ...dialogStyle, maxWidth: typeof width === "number" ? `${width}px` : width }}>
+          {/* Header */}
+          <div style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "16px 20px",
+            borderBottom: "1px solid var(--bb-border-muted)",
+            flexShrink: 0,
+          }}>
+            <h3 style={{
+              margin: 0,
+              fontSize: "var(--bb-text-md)",
+              fontWeight: 600,
+              color: "var(--bb-text-primary)",
+            }}>
+              {title}
+            </h3>
+            <button
+              onClick={onClose}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "28px",
+                height: "28px",
+                borderRadius: "var(--bb-radius)",
+                border: "none",
+                background: "transparent",
+                color: "var(--bb-text-muted)",
+                cursor: "pointer",
+                fontSize: "18px",
+                lineHeight: 1,
+              }}
+            >
+              ×
+            </button>
+          </div>
+
+          {/* Body */}
+          <div style={{ padding: "20px", overflowY: "auto", flex: 1 }}>
+            {children}
+          </div>
+
+          {/* Footer */}
+          {footer && (
+            <div style={{
+              padding: "14px 20px",
+              borderTop: "1px solid var(--bb-border-muted)",
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: "8px",
+              flexShrink: 0,
+            }}>
+              {footer}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/NavItem.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import Link from "next/link";
+import type { CSSProperties, ReactNode } from "react";
+
+export interface NavItemDef {
+  href: string;
+  label: string;
+  icon?: ReactNode;
+  badge?: number | string;
+  exact?: boolean;
+}
+
+interface Props extends NavItemDef {
+  active: boolean;
+  onClick?: () => void;
+}
+
+export function NavItem({ href, label, icon, badge, active, onClick }: Props) {
+  const style: CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    gap: "9px",
+    padding: "6px 10px",
+    borderRadius: "var(--bb-radius)",
+    marginBottom: "1px",
+    fontSize: "var(--bb-text-sm)",
+    fontWeight: active ? 600 : 400,
+    color: active ? "var(--bb-sidebar-active-text)" : "var(--bb-sidebar-text)",
+    background: active ? "var(--bb-sidebar-active-bg)" : "transparent",
+    textDecoration: "none",
+    cursor: "pointer",
+    transition: "background var(--bb-transition), color var(--bb-transition)",
+    userSelect: "none",
+  };
+
+  const content = (
+    <>
+      {icon && (
+        <span style={{ display: "flex", alignItems: "center", width: "16px", flexShrink: 0, opacity: active ? 1 : 0.7 }}>
+          {icon}
+        </span>
+      )}
+      <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+        {label}
+      </span>
+      {badge !== undefined && badge !== 0 && badge !== "" && (
+        <span style={{
+          background: "var(--bb-brand)",
+          color: "#fff",
+          fontSize: "10px",
+          fontWeight: 700,
+          lineHeight: 1,
+          padding: "2px 5px",
+          borderRadius: "var(--bb-radius-full)",
+          minWidth: "16px",
+          textAlign: "center",
+          flexShrink: 0,
+        }}>
+          {typeof badge === "number" && badge > 99 ? "99+" : badge}
+        </span>
+      )}
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        onClick={onClick}
+        style={{ ...style, width: "100%", border: "none", textAlign: "left", background: active ? "var(--bb-sidebar-active-bg)" : "transparent" }}
+        onMouseEnter={(e) => { if (!active) (e.currentTarget as HTMLElement).style.background = "var(--bb-sidebar-hover-bg)"; }}
+        onMouseLeave={(e) => { if (!active) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <Link
+      href={href}
+      style={style}
+      onMouseEnter={(e) => { if (!active) (e.currentTarget as HTMLElement).style.background = "var(--bb-sidebar-hover-bg)"; }}
+      onMouseLeave={(e) => { if (!active) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
+    >
+      {content}
+    </Link>
+  );
+}

package/src/components/NavSection.tsx

@@ -0,0 +1,46 @@
+import type { CSSProperties, ReactNode } from "react";
+
+interface Props {
+  label?: string;
+  children: ReactNode;
+  action?: ReactNode;
+}
+
+export function NavSection({ label, children, action }: Props) {
+  return (
+    <div style={{ marginBottom: "4px" }}>
+      {label && (
+        <div style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "10px 10px 3px",
+        }}>
+          <span style={{
+            fontSize: "var(--bb-text-xs)",
+            fontWeight: 600,
+            color: "var(--bb-sidebar-section-label)",
+            textTransform: "uppercase",
+            letterSpacing: "0.06em",
+          }}>
+            {label}
+          </span>
+          {action}
+        </div>
+      )}
+      <div style={{ padding: "0 4px" }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function NavDivider() {
+  return (
+    <div style={{
+      height: "1px",
+      background: "var(--bb-sidebar-border)",
+      margin: "8px 10px",
+    }} />
+  );
+}