@inversestudio/neptune-components 1.0.0

package/components/feedback/StatusIndicator.jsx

@@ -0,0 +1,40 @@
+/**
+ * StatusIndicator component - Animated status dot with label
+ *
+ * Styles are in neptune-components.css. Only pass `style` for truly dynamic overrides.
+ *
+ * Displays a colored dot with an optional pulse animation and accompanying label.
+ * Used to indicate status of processes, services, or system components.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.label - Text label describing the status
+ * @param {string} [props.status='running'] - Status state: 'running', 'paused', 'error', 'stopped'
+ * @param {boolean} [props.pulse=true] - Whether to show pulse animation (default true for running status)
+ * @returns {JSX.Element} Styled status indicator with dot and label
+ *
+ * @example
+ * <StatusIndicator label="API Server" status="running" pulse={true} />
+ * <StatusIndicator label="Database" status="error" pulse={false} />
+ */
+export default function StatusIndicator({
+  label,
+  status = "running",
+  pulse,
+  ...props
+}) {
+  // Default pulse behavior: true for running, false for others
+  const showPulse = pulse !== undefined ? pulse : status === "running";
+
+  return (
+    <div
+      className={`neptune-status-indicator neptune-status-indicator--${status} ${showPulse ? "neptune-status-indicator--pulse" : ""}`}
+      {...props}
+    >
+      <div className="neptune-status-indicator__dot" />
+      <span className="neptune-status-indicator__label">
+        {label}
+      </span>
+    </div>
+  );
+}

package/components/inputs/Button.jsx

@@ -0,0 +1,48 @@
+/**
+ * Button component for user interactions
+ *
+ * Supports multiple variants (primary, secondary, tertiary, ghost, danger) and
+ * sizes (sm, default, lg). Can include an icon alongside text via the icon prop.
+ *
+ * Theme-aware: when rendered inside a data-theme="naia" container, accent
+ * colors automatically switch from orange to purple — no variant change needed.
+ *
+ * Styles are in neptune-components.css. Only pass `style` for truly dynamic overrides.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.variant='primary'] - 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger'
+ * @param {string} [props.size='default'] - 'sm' | 'default' | 'lg'
+ * @param {boolean} [props.disabled=false]
+ * @param {React.ReactNode} [props.icon] - Optional icon before text
+ * @param {React.ReactNode} [props.children] - Button text
+ * @param {Function} [props.onClick]
+ * @param {string} [props.className]
+ * @param {Object} [props.style] - Dynamic inline overrides only
+ */
+export default function Button({
+  variant = "primary",
+  size = "default",
+  disabled = false,
+  icon,
+  children,
+  onClick,
+  className = "",
+  style = {},
+  ...props
+}) {
+  return (
+    <button
+      className={`neptune-button neptune-button--${variant} neptune-button--${size} ${
+        disabled ? "neptune-button--disabled" : ""
+      } ${className}`}
+      style={style}
+      disabled={disabled}
+      onClick={onClick}
+      {...props}
+    >
+      {icon && <span className="neptune-button__icon">{icon}</span>}
+      {children && <span className="neptune-button__text">{children}</span>}
+    </button>
+  );
+}

package/components/inputs/Checkbox.jsx

@@ -0,0 +1,90 @@
+import { Check } from "lucide-react";
+
+/**
+ * Checkbox component for boolean selection
+ * Displays a checkmark icon when checked, supports label
+ *
+ * Styles are in neptune-components.css. Only pass `style` for truly dynamic overrides.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {boolean} [props.checked=false] - Whether the checkbox is in the checked state
+ * @param {Function} [props.onChange] - Change handler that receives the new boolean value
+ * @param {string} [props.label] - Optional label text displayed next to checkbox
+ * @param {boolean} [props.disabled=false] - Whether the checkbox is disabled
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {Object} [props.style] - Inline styles
+ * @returns {JSX.Element} Styled checkbox element with optional label
+ *
+ * @example
+ * // Basic checkbox
+ * <Checkbox
+ *   checked={isChecked}
+ *   onChange={(checked) => setIsChecked(checked)}
+ * />
+ *
+ * @example
+ * // Checkbox with label
+ * <Checkbox
+ *   label="I agree to the terms"
+ *   checked={agreed}
+ *   onChange={(checked) => setAgreed(checked)}
+ * />
+ *
+ * @example
+ * // Disabled checkbox
+ * <Checkbox
+ *   label="Unavailable option"
+ *   checked={false}
+ *   disabled={true}
+ * />
+ */
+export default function Checkbox({
+  checked = false,
+  onChange,
+  label,
+  disabled = false,
+  className = "",
+  style = {},
+  ...props
+}) {
+  const handleChange = () => {
+    if (!disabled && onChange) {
+      onChange(!checked);
+    }
+  };
+
+  return (
+    <label
+      className={`neptune-checkbox ${checked ? "neptune-checkbox--checked" : ""} ${
+        disabled ? "neptune-checkbox--disabled" : ""
+      } ${className}`}
+      style={style}
+      {...props}
+    >
+      <div className="neptune-checkbox__box">
+        {checked && (
+          <Check
+            size={16}
+            strokeWidth={3}
+            className="neptune-checkbox__icon"
+          />
+        )}
+      </div>
+
+      {label && (
+        <span className="neptune-checkbox__label">
+          {label}
+        </span>
+      )}
+
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={handleChange}
+        disabled={disabled}
+        className="neptune-checkbox__input"
+      />
+    </label>
+  );
+}

package/components/inputs/FilterBar.jsx

@@ -0,0 +1,64 @@
+import Button from "./Button.jsx";
+
+/**
+ * FilterBar — Horizontal row of filter pill buttons
+ *
+ * Styles are in neptune-components.css. Only pass `style` for truly dynamic overrides.
+ *
+ * Renders an array of filter labels as Button components. The currently active
+ * filter uses the "secondary" variant; inactive filters use "tertiary". All
+ * buttons are size="sm". Calls `onChange` with the selected filter string
+ * when clicked.
+ *
+ * Theme-aware: inherits theme from parent container via Button's theme support.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string[]} [props.filters=[]] - Array of filter label strings
+ * @param {string} [props.active] - Currently active filter value
+ * @param {Function} [props.onChange] - Called with the selected filter string
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.CSSProperties} [props.style] - Additional inline styles
+ * @returns {JSX.Element} FilterBar component
+ *
+ * @example
+ * <FilterBar
+ *   filters={["All", "Published", "Draft", "Archived"]}
+ *   active="All"
+ *   onChange={(filter) => console.log("Selected:", filter)}
+ * />
+ *
+ * @example
+ * // Inside a Naia-themed container
+ * <div data-theme="naia">
+ *   <FilterBar filters={["Recent", "Starred"]} active="Recent" onChange={setFilter} />
+ * </div>
+ */
+export default function FilterBar({
+  filters = [],
+  active,
+  onChange,
+  className = "",
+  style = {},
+}) {
+  return (
+    <div
+      className={`neptune-filter-bar ${className}`}
+      style={style}
+      role="group"
+      aria-label="Filters"
+    >
+      {filters.map((filter) => (
+        <Button
+          key={filter}
+          variant={filter === active ? "secondary" : "tertiary"}
+          size="sm"
+          onClick={() => onChange && onChange(filter)}
+          aria-pressed={filter === active}
+        >
+          {filter}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/components/inputs/IconButton.jsx

@@ -0,0 +1,43 @@
+/**
+ * IconButton — Icon-only button for toolbars, headers, and compact actions
+ *
+ * Styles are in neptune-components.css. Only pass `style` for truly dynamic overrides.
+ *
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} props.icon - Icon element (required)
+ * @param {string} [props.variant='subtle'] - 'subtle' | 'outline' | 'secondary' | 'ghost'
+ * @param {string} [props.size='default'] - 'sm' (24px) | 'default' (32px)
+ * @param {boolean} [props.disabled=false]
+ * @param {string} [props.title] - Tooltip / aria-label
+ * @param {Function} [props.onClick]
+ * @param {string} [props.className]
+ * @param {Object} [props.style] - Dynamic inline overrides only
+ */
+export default function IconButton({
+  icon,
+  variant = "subtle",
+  size = "default",
+  disabled = false,
+  title,
+  onClick,
+  className = "",
+  style = {},
+  ...props
+}) {
+  return (
+    <button
+      className={`neptune-icon-button neptune-icon-button--${variant} neptune-icon-button--${size} ${
+        disabled ? "neptune-icon-button--disabled" : ""
+      } ${className}`}
+      style={style}
+      disabled={disabled}
+      title={title}
+      onClick={onClick}
+      aria-label={title}
+      {...props}
+    >
+      {icon}
+    </button>
+  );
+}

package/components/inputs/IconToggle.jsx

@@ -0,0 +1,44 @@
+/**
+ * IconToggle — Stateful icon button that toggles between pressed/unpressed
+ *
+ * Styles are in neptune-components.css. Only pass `style` for truly dynamic overrides.
+ *
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} props.icon - Icon element (required)
+ * @param {boolean} [props.pressed=false] - Whether pressed/active
+ * @param {Function} [props.onToggle] - Toggle handler, receives new boolean
+ * @param {string} [props.size='default'] - 'sm' (24px) | 'default' (32px)
+ * @param {boolean} [props.disabled=false]
+ * @param {string} [props.title] - Tooltip / aria-label
+ * @param {string} [props.className]
+ * @param {Object} [props.style] - Dynamic inline overrides only
+ */
+export default function IconToggle({
+  icon,
+  pressed = false,
+  onToggle,
+  size = "default",
+  disabled = false,
+  title,
+  className = "",
+  style = {},
+  ...props
+}) {
+  return (
+    <button
+      className={`neptune-icon-toggle neptune-icon-toggle--${size} ${pressed ? "neptune-icon-toggle--pressed" : ""} ${
+        disabled ? "neptune-icon-toggle--disabled" : ""
+      } ${className}`}
+      style={style}
+      disabled={disabled}
+      title={title}
+      onClick={() => !disabled && onToggle && onToggle(!pressed)}
+      aria-pressed={pressed}
+      aria-label={title}
+      {...props}
+    >
+      {icon}
+    </button>
+  );
+}

package/components/inputs/NaiaChatInput.jsx

@@ -0,0 +1,173 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import PillSelect from "./PillSelect.jsx";
+import NaiaSendButton from "./NaiaSendButton.jsx";
+import SuggestionPill from "./SuggestionPill.jsx";
+
+/**
+ * NaiaChatInput — Full chat input area with suggestions, pill selects, and send button
+ *
+ * Styles are in neptune-components.css. Only pass `style` for truly dynamic overrides.
+ *
+ * A themed chat input that composes PillSelect, SuggestionPill, and NaiaSendButton
+ * into a cohesive input area for Naia AI panels. The textarea auto-resizes as the
+ * user types. Suggestion pills render above the container. Mode, model, and autonomy
+ * PillSelects render in the footer alongside the send button.
+ *
+ * Theme-aware: accent colors adapt automatically in Naia context.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.value=''] - Controlled textarea value
+ * @param {Function} [props.onChange] - Called with new string value on input
+ * @param {Function} [props.onSend] - Called with trimmed string when user sends (Enter or button)
+ * @param {string} [props.placeholder='Ask Naia...'] - Placeholder text
+ * @param {string[]} [props.suggestions] - Suggestion pill labels shown above the input
+ * @param {Function} [props.onSuggestionClick] - Called with the suggestion string when clicked
+ * @param {{value: string, options: Array, onChange: Function}} [props.mode] - Mode PillSelect config
+ * @param {{value: string, options: Array, onChange: Function}} [props.model] - Model PillSelect config
+ * @param {{value: string, options: Array, onChange: Function}} [props.autonomy] - Autonomy PillSelect config
+ * @param {React.ReactNode} [props.modeIcon] - Icon for the mode PillSelect trigger (e.g. NaiaLogo)
+ * @param {string} [props.className]
+ * @param {React.CSSProperties} [props.style]
+ *
+ * @example
+ * <NaiaChatInput
+ *   value={msg}
+ *   onChange={setMsg}
+ *   onSend={(text) => send(text)}
+ *   placeholder="Plan, Build, / for commands..."
+ *   suggestions={["Create a Fiori app", "Check agent errors"]}
+ *   onSuggestionClick={(s) => send(s)}
+ *   mode={{ value: "code", options: modeOpts, onChange: setMode }}
+ *   model={{ value: "opus", options: modelOpts, onChange: setModel }}
+ *   autonomy={{ value: "balanced", options: autoOpts, onChange: setAutonomy }}
+ *   modeIcon={<NaiaLogo size={12} />}
+ * />
+ */
+export default function NaiaChatInput({
+  value: controlledValue,
+  onChange,
+  onSend,
+  placeholder = "Ask Naia...",
+  suggestions,
+  onSuggestionClick,
+  mode,
+  model,
+  autonomy,
+  modeIcon,
+  className = "",
+  style = {},
+}) {
+  const [internalValue, setInternalValue] = useState("");
+  const [focused, setFocused] = useState(false);
+  const textareaRef = useRef(null);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+
+  const updateValue = useCallback(
+    (newVal) => {
+      if (onChange) onChange(newVal);
+      else setInternalValue(newVal);
+    },
+    [onChange]
+  );
+
+  // Auto-resize textarea (truly dynamic — must stay as inline style)
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (el) {
+      el.style.height = "auto";
+      el.style.height = Math.min(el.scrollHeight, 140) + "px";
+    }
+  }, [value]);
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleSend = () => {
+    const trimmed = value.trim();
+    if (trimmed && onSend) {
+      onSend(trimmed);
+      updateValue("");
+    }
+  };
+
+  const hasContent = value.trim().length > 0;
+  const hasSuggestions = suggestions && suggestions.length > 0;
+
+  return (
+    <div data-theme="naia" className={`neptune-naia-chat-input-area ${className}`}>
+      {/* Suggestion pills row */}
+      {hasSuggestions && (
+        <div className="neptune-naia-chat-input__suggestions">
+          {suggestions.map((label, i) => (
+            <SuggestionPill
+              key={i}
+              onClick={() => onSuggestionClick && onSuggestionClick(label)}
+            >
+              {label}
+            </SuggestionPill>
+          ))}
+        </div>
+      )}
+
+      {/* Rounded container */}
+      <div
+        className={`neptune-naia-chat-input__container ${focused ? "neptune-naia-chat-input__container--focused" : ""}`}
+        style={style}
+      >
+        {/* Textarea */}
+        <div className="neptune-naia-chat-input__textarea-wrap">
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => updateValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            placeholder={placeholder}
+            rows={1}
+            className="neptune-naia-chat-input__textarea"
+            aria-label={placeholder}
+          />
+        </div>
+
+        {/* Footer row: pill selects + send button */}
+        <div className="neptune-naia-chat-input__footer">
+          {mode && (
+            <PillSelect
+              value={mode.value}
+              options={mode.options}
+              onChange={mode.onChange}
+              icon={modeIcon}
+            />
+          )}
+          {model && (
+            <PillSelect
+              value={model.value}
+              options={model.options}
+              onChange={model.onChange}
+            />
+          )}
+          {autonomy && (
+            <PillSelect
+              value={autonomy.value}
+              options={autonomy.options}
+              onChange={autonomy.onChange}
+            />
+          )}
+
+          <NaiaSendButton
+            onClick={handleSend}
+            disabled={!hasContent}
+            style={{ marginLeft: "auto" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/inputs/NaiaSendButton.jsx

@@ -0,0 +1,36 @@
+import { Send } from "lucide-react";
+
+/**
+ * NaiaSendButton — Circular send button for chat inputs
+ *
+ * Styles are in neptune-components.css. The `size` prop is dynamic (arbitrary px)
+ * so it remains as an inline style.
+ *
+ * @component
+ * @param {Object} props
+ * @param {Function} [props.onClick]
+ * @param {boolean} [props.disabled=false]
+ * @param {number} [props.size=28] - Button diameter in px
+ * @param {string} [props.className]
+ * @param {Object} [props.style] - Dynamic inline overrides only
+ */
+export default function NaiaSendButton({
+  onClick,
+  disabled = false,
+  size = 28,
+  className = "",
+  style = {},
+}) {
+  return (
+    <button
+      className={`neptune-naia-send-button ${className}`}
+      style={{ width: `${size}px`, height: `${size}px`, ...style }}
+      onClick={!disabled ? onClick : undefined}
+      disabled={disabled}
+      aria-label="Send message"
+      title="Send message"
+    >
+      <Send size={13} />
+    </button>
+  );
+}