@pcoi/components 0.1.1 → 1.0.0

package/src/Panel/Panel.css

@@ -1,35 +0,0 @@
-/* Panel — @pcoi/components */
-
-.pcoi-panel {
-  background: var(--pcoi-semantic-bg-card);
-  border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-semantic-radius-card);
-  overflow: hidden;
-}
-
-.pcoi-panel__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--pcoi-semantic-spacing-panel-padding-sm) var(--pcoi-semantic-spacing-panel-padding);
-  border-bottom: 1px solid var(--pcoi-semantic-border-default);
-}
-
-.pcoi-panel__title {
-  font-size: var(--pcoi-semantic-type-body-size);
-  font-weight: var(--pcoi-semantic-type-emphasis-weight);
-  color: var(--pcoi-semantic-text-primary);
-  margin: 0;
-}
-
-.pcoi-panel__action {
-  flex-shrink: 0;
-}
-
-.pcoi-panel__body {
-  padding: var(--pcoi-semantic-spacing-panel-padding);
-}
-
-.pcoi-panel--flush .pcoi-panel__body {
-  padding: 0;
-}

package/src/Panel/Panel.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import type { HeadingLevel } from "../types";
-
-export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Panel title rendered in a header bar */
-  title?: string;
-  /** Heading level for the title (default: "h3") */
-  headingLevel?: HeadingLevel;
-  /** Action slot in the header (e.g. a Button or filter) */
-  action?: React.ReactNode;
-  /** Panel body content */
-  children: React.ReactNode;
-  /** Remove default body padding (for tables/charts that need edge-to-edge content) */
-  flush?: boolean;
-}
-
-/**
- * PCOI Panel — Dashboard section container with optional header
- * Tokens: bg/card, border/default, radius-md, spacing-16/24, text/primary
- */
-export const Panel = React.forwardRef<HTMLDivElement, PanelProps>(
-  (
-    {
-      title,
-      headingLevel = "h3",
-      action,
-      children,
-      flush = false,
-      className = "",
-      ...rest
-    },
-    ref
-  ) => {
-    const Heading = headingLevel;
-
-    const wrapperClasses = [
-      "pcoi-panel",
-      flush ? "pcoi-panel--flush" : "",
-      className,
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    return (
-      <div ref={ref} className={wrapperClasses} {...rest}>
-        {(title || action) && (
-          <div className="pcoi-panel__header">
-            {title && (
-              <Heading className="pcoi-panel__title">{title}</Heading>
-            )}
-            {action && <div className="pcoi-panel__action">{action}</div>}
-          </div>
-        )}
-        <div className="pcoi-panel__body">{children}</div>
-      </div>
-    );
-  }
-);
-
-Panel.displayName = "Panel";
-export default Panel;

package/src/Panel/index.ts

@@ -1,2 +0,0 @@
-export { Panel, type PanelProps } from "./Panel";
-export { default } from "./Panel";

package/src/PromptBar/PromptBar.css

@@ -1,68 +0,0 @@
-/* PromptBar — @pcoi/components */
-
-.pcoi-prompt-bar {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--pcoi-semantic-spacing-panel-gap);
-  padding: var(--pcoi-semantic-spacing-input-y) var(--pcoi-semantic-spacing-input-x);
-  background: var(--pcoi-semantic-bg-card);
-  border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-semantic-radius-card);
-  transition:
-    border-color var(--pcoi-effect-transition-fast),
-    box-shadow var(--pcoi-effect-transition-fast);
-}
-
-.pcoi-prompt-bar:not(:focus-within):hover {
-  border-color: var(--pcoi-semantic-border-input-hover);
-}
-
-.pcoi-prompt-bar:focus-within {
-  border-color: var(--pcoi-semantic-focus-border);
-  box-shadow: var(--pcoi-effect-shadow-focus-ring);
-}
-
-.pcoi-prompt-bar__input {
-  flex: 1;
-  min-height: 24px;
-  max-height: 120px;
-  padding: var(--pcoi-semantic-spacing-control-padding-2xs) 0;
-  font-family: var(--pcoi-semantic-type-body-font);
-  font-size: var(--pcoi-semantic-type-body-size);
-  line-height: var(--pcoi-semantic-type-body-line-height);
-  color: var(--pcoi-semantic-text-primary);
-  background: transparent;
-  border: none;
-  outline: none;
-  resize: none;
-}
-
-.pcoi-prompt-bar__input::placeholder {
-  color: var(--pcoi-semantic-text-muted);
-}
-
-.pcoi-prompt-bar__actions {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.pcoi-prompt-bar__send.pcoi-btn {
-  padding: var(--pcoi-semantic-spacing-control-padding-xs);
-  min-width: 0;
-  min-height: 0;
-  width: var(--pcoi-semantic-sizing-btn-height-nav);
-  height: var(--pcoi-semantic-sizing-btn-height-nav);
-}
-
-.pcoi-prompt-bar__send-icon {
-  display: flex;
-  transform: rotate(-90deg);
-}
-
-/* ── Responsive: compact send on small mobile ── */
-@media (max-width: 480px) {
-  .pcoi-prompt-bar {
-    padding: var(--pcoi-semantic-spacing-control-padding-sm) var(--pcoi-semantic-spacing-input-y);
-  }
-}

package/src/PromptBar/PromptBar.figma.tsx

@@ -1,25 +0,0 @@
-import figma from "@figma/code-connect";
-import { PromptBar } from "./PromptBar";
-
-/**
- * Code Connect: PromptBar
- * Maps Figma prompt bar states to React PromptBar props
- */
-figma.connect(PromptBar, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=105-1", {
-  props: {
-    value: figma.string("Value"),
-    placeholder: figma.string("Placeholder"),
-    disabled: figma.boolean("Disabled"),
-    loading: figma.boolean("Loading"),
-  },
-  example: ({ value, placeholder, disabled, loading }) => (
-    <PromptBar
-      value={value}
-      placeholder={placeholder}
-      disabled={disabled}
-      loading={loading}
-      onChange={() => undefined}
-      onSubmit={() => undefined}
-    />
-  ),
-});

package/src/PromptBar/PromptBar.test.tsx

@@ -1,83 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { PromptBar } from "./PromptBar";
-
-describe("PromptBar", () => {
-  it("calls onChange with textarea value", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-
-    render(
-      <PromptBar
-        value=""
-        onChange={onChange}
-        onSubmit={onSubmit}
-        placeholder="Ask"
-      />
-    );
-
-    fireEvent.change(screen.getByRole("textbox", { name: "Ask" }), {
-      target: { value: "hello" },
-    });
-
-    expect(onChange).toHaveBeenCalledWith("hello");
-  });
-
-  it("submits trimmed value on Enter", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-
-    render(
-      <PromptBar
-        value="  hello world  "
-        onChange={onChange}
-        onSubmit={onSubmit}
-        placeholder="Ask"
-      />
-    );
-
-    fireEvent.keyDown(screen.getByRole("textbox", { name: "Ask" }), {
-      key: "Enter",
-      code: "Enter",
-      shiftKey: false,
-    });
-
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-    expect(onSubmit).toHaveBeenCalledWith("hello world");
-  });
-
-  it("does not submit on Shift+Enter", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-
-    render(
-      <PromptBar
-        value="hello"
-        onChange={onChange}
-        onSubmit={onSubmit}
-        placeholder="Ask"
-      />
-    );
-
-    fireEvent.keyDown(screen.getByRole("textbox", { name: "Ask" }), {
-      key: "Enter",
-      code: "Enter",
-      shiftKey: true,
-    });
-
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  it("disables send button when value is empty/whitespace", () => {
-    render(
-      <PromptBar
-        value="   "
-        onChange={vi.fn()}
-        onSubmit={vi.fn()}
-        placeholder="Ask"
-      />
-    );
-
-    expect(screen.getByRole("button", { name: "Send message" })).toBeDisabled();
-  });
-});

package/src/PromptBar/PromptBar.tsx

@@ -1,93 +0,0 @@
-import React, { useRef, useCallback } from "react";
-import { Button } from "../Button/Button";
-import { ArrowRightIcon } from "@pcoi/icons";
-
-export interface PromptBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit"> {
-  /** Current textarea value */
-  value: string;
-  /** Called when the textarea value changes */
-  onChange: (value: string) => void;
-  /** Called when the user submits (Enter or send button) */
-  onSubmit: (value: string) => void;
-  /** Placeholder text */
-  placeholder?: string;
-  /** Disable input and send */
-  disabled?: boolean;
-  /** Show loading state on send button */
-  loading?: boolean;
-}
-
-/**
- * PCOI PromptBar — Textarea + send button for chat input
- * Tokens: bg/card, border/default, focus-border, radius-md,
- *         text/primary, text/muted, transition-fast
- */
-export const PromptBar = React.forwardRef<HTMLDivElement, PromptBarProps>(
-  (
-    {
-      value,
-      onChange,
-      onSubmit,
-      placeholder = "Ask a question…",
-      disabled = false,
-      loading = false,
-      className = "",
-      ...rest
-    },
-    ref
-  ) => {
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-          e.preventDefault();
-          if (value.trim() && !disabled && !loading) {
-            onSubmit(value.trim());
-          }
-        }
-      },
-      [value, disabled, loading, onSubmit]
-    );
-
-    const handleSubmit = useCallback(() => {
-      if (value.trim() && !disabled && !loading) {
-        onSubmit(value.trim());
-      }
-    }, [value, disabled, loading, onSubmit]);
-
-    const classes = ["pcoi-prompt-bar", className].filter(Boolean).join(" ");
-
-    return (
-      <div ref={ref} className={classes} {...rest}>
-        <textarea
-          ref={textareaRef}
-          className="pcoi-prompt-bar__input"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          disabled={disabled}
-          rows={1}
-          aria-label={placeholder}
-        />
-        <div className="pcoi-prompt-bar__actions">
-          <Button
-            variant="primary"
-            className="pcoi-prompt-bar__send"
-            onClick={handleSubmit}
-            disabled={disabled || loading || !value.trim()}
-            aria-label="Send message"
-          >
-            <span className="pcoi-prompt-bar__send-icon">
-              <ArrowRightIcon size={16} />
-            </span>
-          </Button>
-        </div>
-      </div>
-    );
-  }
-);
-
-PromptBar.displayName = "PromptBar";
-export default PromptBar;

package/src/PromptBar/index.ts

@@ -1,2 +0,0 @@
-export { PromptBar, type PromptBarProps } from "./PromptBar";
-export { default } from "./PromptBar";

package/src/RadioGroup/RadioGroup.css

@@ -1,117 +0,0 @@
-/* RadioGroup — @pcoi/components */
-
-.pcoi-radio-group {
-  border: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-text-gap-sm);
-}
-
-.pcoi-radio-group__legend {
-  font-size: var(--pcoi-semantic-type-label-size);
-  font-weight: var(--pcoi-semantic-type-label-weight);
-  letter-spacing: var(--pcoi-semantic-type-label-letter-spacing);
-  text-transform: uppercase;
-  color: var(--pcoi-semantic-text-secondary);
-  margin-bottom: var(--pcoi-semantic-spacing-inline-2xs);
-}
-
-.pcoi-radio-group__required {
-  color: var(--pcoi-semantic-text-error);
-  margin-left: var(--pcoi-semantic-spacing-inline-2xs);
-}
-
-.pcoi-radio-group__options {
-  display: flex;
-  flex-direction: column;
-  gap: var(--pcoi-semantic-spacing-panel-gap);
-}
-
-.pcoi-radio-group__option {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pcoi-semantic-spacing-inline-sm);
-  cursor: pointer;
-}
-
-.pcoi-radio-group__input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.pcoi-radio-group__circle {
-  width: var(--pcoi-semantic-sizing-control-box-size);
-  height: var(--pcoi-semantic-sizing-control-box-size);
-  flex-shrink: 0;
-  border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-semantic-radius-badge);
-  background: var(--pcoi-semantic-bg-default);
-  position: relative;
-  transition: border-color var(--pcoi-effect-transition-fast, 0.2s ease);
-}
-
-.pcoi-radio-group__circle::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: var(--pcoi-semantic-sizing-radio-dot-size);
-  height: var(--pcoi-semantic-sizing-radio-dot-size);
-  border-radius: var(--pcoi-semantic-radius-badge);
-  background: var(--pcoi-semantic-action-primary-bg);
-  opacity: 0;
-  transition: opacity var(--pcoi-effect-transition-fast, 0.2s ease);
-}
-
-.pcoi-radio-group__input:checked + .pcoi-radio-group__circle {
-  border-color: var(--pcoi-semantic-action-primary-bg);
-}
-
-.pcoi-radio-group__input:checked + .pcoi-radio-group__circle::after {
-  opacity: 1;
-}
-
-.pcoi-radio-group__option:hover .pcoi-radio-group__circle {
-  border-color: var(--pcoi-semantic-border-input-hover);
-}
-
-.pcoi-radio-group__option:active .pcoi-radio-group__circle {
-  transform: var(--pcoi-effect-transform-press-scale-control);
-}
-
-.pcoi-radio-group__input:focus-visible + .pcoi-radio-group__circle {
-  border-color: var(--pcoi-semantic-focus-border);
-  box-shadow: var(--pcoi-effect-shadow-focus-ring);
-}
-
-.pcoi-radio-group__label {
-  font-size: var(--pcoi-semantic-type-body-size);
-  color: var(--pcoi-semantic-text-primary);
-}
-
-/* ── Error state ── */
-.pcoi-radio-group--error .pcoi-radio-group__circle {
-  border-color: var(--pcoi-semantic-border-error);
-}
-
-.pcoi-radio-group__error {
-  font-size: var(--pcoi-semantic-type-label-size);
-  color: var(--pcoi-semantic-text-error);
-  margin: 0;
-}
-
-/* ── Disabled state ── */
-.pcoi-radio-group--disabled {
-  opacity: var(--pcoi-effect-opacity-disabled);
-  pointer-events: none;
-}

package/src/RadioGroup/RadioGroup.tsx

@@ -1,112 +0,0 @@
-import React from "react";
-import type { OptionItem } from "../types";
-
-export interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange"> {
-  /** Group label rendered as a fieldset legend */
-  label: string;
-  /** Shared name for all radio inputs */
-  name: string;
-  /** List of radio options */
-  options: OptionItem[];
-  /** Pre-selected value */
-  defaultValue?: string;
-  /** Error message — when truthy, group enters error state */
-  error?: string;
-  /** Marks the group as required */
-  required?: boolean;
-  /** Disables all radio inputs */
-  disabled?: boolean;
-  /** Called with the selected value when it changes */
-  onChange?: (value: string) => void;
-}
-
-/**
- * PCOI RadioGroup — Accessible radio button group using fieldset/legend
- * Tokens: bg/default, border/default, border/error, focus/border, focus/glow,
- *         action/primary-bg, text/primary, text/secondary, text/error, radius-full
- */
-export const RadioGroup = React.forwardRef<HTMLFieldSetElement, RadioGroupProps>(
-  (
-    {
-      label,
-      name,
-      options,
-      defaultValue,
-      error,
-      required = false,
-      disabled = false,
-      onChange,
-      className = "",
-      ...rest
-    },
-    ref
-  ) => {
-    const errorId = error ? `pcoi-field-${name}-error` : undefined;
-
-    const wrapperClasses = [
-      "pcoi-radio-group",
-      error ? "pcoi-radio-group--error" : "",
-      disabled ? "pcoi-radio-group--disabled" : "",
-      className,
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange?.(e.target.value);
-    };
-
-    return (
-      <fieldset
-        ref={ref}
-        className={wrapperClasses}
-        aria-invalid={!!error}
-        aria-describedby={errorId}
-        {...rest}
-      >
-        <legend className="pcoi-radio-group__legend">
-          {label}
-          {required && (
-            <span className="pcoi-radio-group__required" aria-hidden="true">
-              *
-            </span>
-          )}
-        </legend>
-        <div className="pcoi-radio-group__options">
-          {options.map((opt) => {
-            const optionId = `pcoi-field-${name}-${opt.value}`;
-            return (
-              <label
-                key={opt.value}
-                htmlFor={optionId}
-                className="pcoi-radio-group__option"
-              >
-                <input
-                  type="radio"
-                  id={optionId}
-                  name={name}
-                  value={opt.value}
-                  defaultChecked={defaultValue === opt.value}
-                  required={required}
-                  disabled={disabled || opt.disabled}
-                  onChange={handleChange}
-                  className="pcoi-radio-group__input"
-                />
-                <span className="pcoi-radio-group__circle" aria-hidden="true" />
-                <span className="pcoi-radio-group__label">{opt.label}</span>
-              </label>
-            );
-          })}
-        </div>
-        {error && (
-          <span id={errorId} className="pcoi-radio-group__error" role="alert">
-            {error}
-          </span>
-        )}
-      </fieldset>
-    );
-  }
-);
-
-RadioGroup.displayName = "RadioGroup";
-export default RadioGroup;

package/src/RadioGroup/index.ts

@@ -1,2 +0,0 @@
-export { RadioGroup, type RadioGroupProps } from "./RadioGroup";
-export { default } from "./RadioGroup";

package/src/SectionHeader/SectionHeader.css

@@ -1,38 +0,0 @@
-/* SectionHeader — @pcoi/components */
-
-.pcoi-section-header {
-  text-align: center;
-  max-width: var(--pcoi-semantic-sizing-container-narrow);
-  margin: 0 auto var(--pcoi-semantic-spacing-section-header-margin);
-}
-
-.pcoi-section-header__label {
-  display: inline-block;
-  font-family: var(--pcoi-semantic-type-mono-font);
-  font-size: var(--pcoi-semantic-type-section-label-size);
-  font-weight: var(--pcoi-semantic-type-label-weight);
-  letter-spacing: var(--pcoi-semantic-type-section-label-letter-spacing);
-  text-transform: uppercase;
-  color: var(--pcoi-semantic-text-accent);
-  margin-bottom: var(--pcoi-semantic-spacing-stack-md);
-}
-
-.pcoi-section-header__title {
-  font-size: var(--pcoi-semantic-type-section-title-size);
-  font-weight: var(--pcoi-semantic-type-heading-weight);
-  line-height: var(--pcoi-semantic-type-heading-line-height);
-  letter-spacing: var(--pcoi-semantic-type-heading-letter-spacing);
-  color: var(--pcoi-semantic-text-primary);
-  margin: 0 0 var(--pcoi-semantic-spacing-stack-md) 0;
-}
-
-.pcoi-section-header__title em {
-  font-style: normal;
-  color: var(--pcoi-semantic-text-accent);
-}
-
-.pcoi-section-header__desc {
-  font-size: var(--pcoi-semantic-type-heading-sm-size);
-  color: var(--pcoi-semantic-text-secondary);
-  line-height: var(--pcoi-semantic-type-relaxed-line-height);
-}

package/src/SectionHeader/SectionHeader.figma.tsx

@@ -1,23 +0,0 @@
-import figma from "@figma/code-connect";
-import { SectionHeader } from "./SectionHeader";
-
-/**
- * Code Connect: SectionHeader
- * Maps Figma section header properties to React SectionHeader props
- */
-figma.connect(SectionHeader, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=106-1", {
-  props: {
-    label: figma.string("Label"),
-    title: figma.string("Title"),
-    titleEmphasis: figma.string("Title Emphasis"),
-    description: figma.string("Description"),
-  },
-  example: ({ label, title, titleEmphasis, description }) => (
-    <SectionHeader
-      label={label}
-      title={title}
-      titleEmphasis={titleEmphasis || undefined}
-      description={description || undefined}
-    />
-  ),
-});