@inversestudio/neptune-components 1.0.0

package/components/shared/index.jsx

@@ -0,0 +1,112 @@
+/**
+ * Shared utilities and components for the Neptune design system
+ * Exports commonly used components, helpers, and wrappers
+ */
+
+/**
+ * Token helper function for CSS variable references
+ * @param {string} token - The token name (e.g., 'npt-color-primary-vivid')
+ * @returns {string} CSS variable reference string (e.g., 'var(--npt-color-primary-vivid)')
+ */
+export const t = (token) => `var(--${token})`;
+
+/**
+ * Neptune logo component with customizable size and color
+ * @param {Object} props - Component props
+ * @param {number} [props.size=24] - Size in pixels
+ * @param {string} [props.color='var(--npt-accent-primary-vivid)'] - SVG stroke color
+ * @returns {JSX.Element} SVG Neptune logo
+ */
+export function NeptuneLogo({ size = 24, color = "var(--npt-accent-primary-vivid)" }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} viewBox="0 0 940.69 440.52" style={{ display: "block", flexShrink: 0 }}>
+      <path style={{ fill: color, strokeWidth: 0 }} d="M940.7,220.26l-233.04.12-116.47,201.66-112.7-195.19c-.49-.93-3.81-6.28-3.81-6.28,0,0-3.31,5.33-3.77,6.23-.02.01-.02.02-.03.03l-59.07,102.23-.77,1.33c-19.04,32.91-46.35,60.45-79.1,79.75s-70.92,30.38-111.68,30.38C98.62,440.52,0,341.9,0,220.26S98.62,0,220.26,0C301.79,0,372.98,44.3,411.06,110.14v-.02l59.84,103.57h.01c.62,1,3.79,6.86,3.79,6.86,0,0,3.09-5.71,3.74-6.79.01-.01.01-.02.02-.02l112.73-195.27h233l116.51,201.79Z"/>
+    </svg>
+  );
+}
+
+/**
+ * Naia logo component with customizable size and color
+ * @param {Object} props - Component props
+ * @param {number} [props.size=16] - Size in pixels
+ * @param {string} [props.color='#B995FF'] - SVG stroke color
+ * @returns {JSX.Element} SVG Naia logo
+ */
+export function NaiaLogo({ size = 16, color = "var(--npt-accent-primary-vivid)" }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display: "block", flexShrink: 0 }}>
+      <path d="M0 0V16H3.69231L8 8.61539L12.3077 16H16V0H12.3077L8 7.38462L3.69231 0H0Z" fill={color}/>
+    </svg>
+  );
+}
+
+/**
+ * Section title component for displaying section headers
+ * Uses design tokens for consistent typography and spacing
+ * @param {Object} props - Component props
+ * @param {string} props.children - Title text content
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {JSX.Element} Styled section title
+ */
+export function SectionTitle({ children, className = "" }) {
+  return (
+    <h2
+      className={`section-title ${className}`}
+      style={{
+        fontSize: t("npt-font-size-lg"),
+        fontWeight: t("npt-font-weight-semibold"),
+        color: t("npt-text-primary"),
+        marginBottom: t("npt-spacing-md"),
+        marginTop: 0,
+      }}
+    >
+      {children}
+    </h2>
+  );
+}
+
+/**
+ * Card wrapper component for containing content with consistent styling
+ * Provides padding, border, and background using design tokens
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.children - Card content
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {JSX.Element} Styled card container
+ */
+export function Card({ children, className = "" }) {
+  return (
+    <div
+      className={`card ${className}`}
+      style={{
+        padding: t("npt-spacing-lg"),
+        backgroundColor: t("npt-bg-surface-primary"),
+        border: `1px solid ${t("npt-border-subtle")}`,
+        borderRadius: t("npt-radius-md"),
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Divider component for visual separation of content
+ * A simple horizontal line using design tokens for styling
+ * @param {Object} props - Component props
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {JSX.Element} Styled divider line
+ */
+export function Divider({ className = "" }) {
+  return (
+    <hr
+      className={`divider ${className}`}
+      style={{
+        borderTop: `1px solid ${t("npt-border-subtle")}`,
+        borderLeft: "none",
+        borderRight: "none",
+        borderBottom: "none",
+        margin: `${t("npt-spacing-md")} 0`,
+      }}
+    />
+  );
+}

package/index.css

@@ -0,0 +1,3 @@
+/* Neptune Design System — import this once in your app entry */
+@import './tokens/neptune-design-tokens.css';
+@import './neptune-components.css';

package/index.js

@@ -0,0 +1,50 @@
+// Auto-generated by build-package.js — do not edit manually.
+// Regenerate with: node scripts/build-package.js
+
+// === Shared Utilities ===
+export { t, NeptuneLogo, NaiaLogo, SectionTitle, Divider } from './components/shared/index.jsx';
+
+// === Inputs ===
+export { default as Button } from './components/inputs/Button.jsx';
+export { default as IconButton } from './components/inputs/IconButton.jsx';
+export { default as IconToggle } from './components/inputs/IconToggle.jsx';
+export { default as TextInput } from './components/inputs/TextInput.jsx';
+export { default as Toggle } from './components/inputs/Toggle.jsx';
+export { default as Checkbox } from './components/inputs/Checkbox.jsx';
+export { default as PillSelect } from './components/inputs/PillSelect.jsx';
+export { default as NaiaSendButton } from './components/inputs/NaiaSendButton.jsx';
+export { default as SuggestionPill } from './components/inputs/SuggestionPill.jsx';
+export { default as NaiaChatInput } from './components/inputs/NaiaChatInput.jsx';
+export { default as FilterBar } from './components/inputs/FilterBar.jsx';
+export { default as PropertyField } from './components/inputs/PropertyField.jsx';
+
+// === Navigation ===
+export { default as TabBar } from './components/navigation/TabBar.jsx';
+export { default as SidebarNav } from './components/navigation/SidebarNav.jsx';
+export { default as SidebarTabs } from './components/navigation/SidebarTabs.jsx';
+export { default as Dropdown } from './components/navigation/Dropdown.jsx';
+export { default as Breadcrumb } from './components/navigation/Breadcrumb.jsx';
+
+// === Layout ===
+export { default as AppHeader } from './components/layout/AppHeader.jsx';
+export { default as Toolbar } from './components/layout/Toolbar.jsx';
+export { default as BottomBar } from './components/layout/BottomBar.jsx';
+export { default as Panel } from './components/layout/Panel.jsx';
+export { default as Card } from './components/layout/Card.jsx';
+
+// === Feedback ===
+export { default as Badge } from './components/feedback/Badge.jsx';
+export { default as StatusDot } from './components/feedback/StatusDot.jsx';
+export { default as StatusIndicator } from './components/feedback/StatusIndicator.jsx';
+export { default as ChatMessage } from './components/feedback/ChatMessage.jsx';
+export { default as Avatar } from './components/feedback/Avatar.jsx';
+
+// === Data-display ===
+export { default as DataTable } from './components/data-display/DataTable.jsx';
+export { default as FileTree } from './components/data-display/FileTree.jsx';
+export { default as KpiCard } from './components/data-display/KpiCard.jsx';
+export { default as VersionRow } from './components/data-display/VersionRow.jsx';
+export { default as AppPreview } from './components/data-display/AppPreview.jsx';
+
+// === Overlays ===
+export { default as Modal } from './components/overlays/Modal.jsx';