@peerbots/core 0.1.0

package/src/ui/NumberField.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NumberField } from "./NumberField";
+import { useState } from "react";
+import { Heading, Text } from "./Typography";
+
+const meta: Meta<typeof NumberField> = {
+  title: "UI/NumberField",
+  component: NumberField,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+    showButtons: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof NumberField>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter a number...",
+    min: 0,
+    max: 100,
+  },
+};
+
+const InteractiveExample = (args: React.ComponentProps<typeof NumberField>) => {
+  const [value, setValue] = useState<number | null>(args.defaultValue ?? 10);
+  return (
+    <div className="space-y-2">
+      <div className="max-w-[200px]">
+        <NumberField
+          {...args}
+          value={value}
+          onChange={(val) => setValue(val)}
+        />
+      </div>
+      <Text variant="small">Value: {value}</Text>
+    </div>
+  );
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-12 p-4">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Configuration
+        </Heading>
+        <div className="grid gap-8">
+          <div className="space-y-2">
+            <Text variant="small" className="font-bold">
+              With Buttons & Large Step
+            </Text>
+            <NumberField showButtons defaultValue={50} step={10} />
+          </div>
+          <div className="space-y-2">
+            <Text variant="small" className="font-bold">
+              Small Step (0.1) & Limits (0-1)
+            </Text>
+            <NumberField
+              showButtons
+              defaultValue={0.5}
+              step={0.1}
+              min={0}
+              max={1}
+            />
+          </div>
+          <div className="space-y-2">
+            <Text variant="small" className="font-bold">
+              Disabled
+            </Text>
+            <NumberField disabled defaultValue={123} />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Interactive State
+        </Heading>
+        <InteractiveExample showButtons={true} />
+      </div>
+    </div>
+  ),
+};

package/src/ui/NumberField.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { NumberField as BaseNumberField } from "@base-ui/react";
+import { cn } from "./utils";
+import { Icon } from "./Icon";
+
+export interface NumberFieldProps {
+  value?: number | null;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onChange?: (value: number | null, event: Event) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  className?: string;
+  id?: string;
+  placeholder?: string;
+  showButtons?: boolean;
+}
+
+export const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(
+  (
+    {
+      className,
+      value,
+      defaultValue,
+      min,
+      max,
+      step,
+      onChange,
+      disabled,
+      readOnly,
+      id: propsId,
+      placeholder,
+      showButtons = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const numberId = propsId || generatedId;
+
+    return (
+      <div className="w-full">
+        <BaseNumberField.Root
+          ref={ref}
+          value={value}
+          defaultValue={defaultValue}
+          min={min}
+          max={max}
+          step={step}
+          onValueChange={(val, details) => {
+            if (onChange) {
+              const event = details?.event || (details as unknown as Event);
+              onChange(val, event);
+            }
+          }}
+          disabled={disabled}
+          readOnly={readOnly}
+          className={cn("flex flex-col gap-1", className)}
+          {...props}
+        >
+          <div
+            className={cn(
+              "group relative flex items-center rounded-md border-0 bg-primary/10 ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary shadow-sm",
+              disabled && "opacity-50 cursor-not-allowed",
+            )}
+          >
+            {showButtons && (
+              <BaseNumberField.Decrement
+                aria-label="Decrement"
+                className="relative z-20 flex items-center justify-center w-8 h-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100/50 rounded-l-md border-r border-gray-300 disabled:opacity-30 cursor-pointer"
+              >
+                <Icon size="sm">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M19.5 12h-15"
+                  />
+                </Icon>
+              </BaseNumberField.Decrement>
+            )}
+
+            <BaseNumberField.Input
+              id={numberId}
+              placeholder={placeholder}
+              className={cn(
+                "block w-full bg-transparent border-0 px-3 py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6 text-center appearance-none relative z-0",
+                !showButtons && "rounded-md",
+              )}
+            />
+
+            {showButtons && (
+              <BaseNumberField.Increment
+                aria-label="Increment"
+                className="relative z-20 flex items-center justify-center w-8 h-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100/50 rounded-r-md border-l border-gray-300 disabled:opacity-30 cursor-pointer"
+              >
+                <Icon size="sm">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M12 4.5v15m7.5-7.5h-15"
+                  />
+                </Icon>
+              </BaseNumberField.Increment>
+            )}
+
+            <BaseNumberField.ScrubArea className="absolute inset-0 z-10 cursor-ew-resize opacity-0 hover:opacity-10 transition-opacity bg-primary/5 rounded-md pointer-events-none group-hover:pointer-events-auto" />
+          </div>
+        </BaseNumberField.Root>
+      </div>
+    );
+  },
+);
+
+NumberField.displayName = "NumberField";

package/src/ui/Popover.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Popover as BasePopover } from "@base-ui/react";
+import { cn } from "./utils";
+
+export interface PopoverProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  className?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function Popover({
+  trigger,
+  children,
+  side = "bottom",
+  align = "center",
+  className,
+  open,
+  onOpenChange,
+}: PopoverProps) {
+  return (
+    <BasePopover.Root open={open} onOpenChange={onOpenChange}>
+      <BasePopover.Trigger>{trigger}</BasePopover.Trigger>
+      <BasePopover.Portal>
+        <BasePopover.Positioner side={side} align={align} sideOffset={5}>
+          <BasePopover.Popup
+            className={cn(
+              "z-50 w-72 rounded-md border bg-white p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+              className,
+            )}
+          >
+            {children}
+            <BasePopover.Arrow className="fill-white stroke-gray-200" />
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    </BasePopover.Root>
+  );
+}

package/src/ui/Select.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Select } from "./Select";
+import { Heading, Text } from "./Typography";
+
+const meta: Meta<typeof Select> = {
+  title: "UI/Select",
+  component: Select,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+const simpleOptions = ["Option 1", "Option 2", "Option 3"];
+const objectOptions = [
+  { label: "Banana", value: "banana" },
+  { label: "Apple", value: "apple" },
+  { label: "Orange", value: "orange" },
+];
+
+export const Default: Story = {
+  args: {
+    options: simpleOptions,
+    placeholder: "Select an option...",
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8 p-4 max-w-sm">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Option Types
+        </Heading>
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <Text variant="small" className="font-bold">
+              String Options
+            </Text>
+            <Select options={simpleOptions} />
+          </div>
+          <div className="space-y-1">
+            <Text variant="small" className="font-bold">
+              Object Options (Label/Value)
+            </Text>
+            <Select options={objectOptions} defaultValue="apple" />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          States
+        </Heading>
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <Text variant="small" className="font-bold">
+              Disabled
+            </Text>
+            <Select
+              options={simpleOptions}
+              disabled
+              placeholder="Can't select"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Select.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { Select as BaseSelect } from "@base-ui/react";
+import { cn } from "./utils";
+import { Icon } from "./Icon";
+
+export interface SelectOption {
+  label: string;
+  value: string | number;
+}
+
+export interface SelectProps {
+  options: (string | SelectOption)[];
+  value?: string | number;
+  defaultValue?: string | number;
+  onChange?: (value: string | number | null, event: Event) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  id?: string;
+  onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+}
+
+export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
+  (
+    {
+      className,
+      options,
+      id: propsId,
+      value,
+      defaultValue,
+      onChange,
+      disabled,
+      placeholder = "Select...",
+      onFocus,
+      ...props
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const selectId = propsId || generatedId;
+
+    return (
+      <div className="w-full">
+        <BaseSelect.Root
+          value={value === undefined ? null : String(value)}
+          defaultValue={
+            defaultValue === undefined ? undefined : String(defaultValue)
+          }
+          onValueChange={(
+            val: string | null,
+            details?: { event: Event } | null,
+          ) => {
+            if (onChange) {
+              // Base UI Select passes eventDetails as the second argument, which has an 'event' property.
+              const event = details?.event || (details as unknown as Event);
+              onChange(val, event);
+            }
+          }}
+          disabled={disabled}
+        >
+          <BaseSelect.Trigger
+            ref={ref}
+            id={selectId}
+            className={cn(
+              "flex w-full items-center justify-between rounded-md border-0 py-1.5 pl-3 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary sm:text-sm sm:leading-6 bg-primary/10 min-h-[36px]",
+              disabled && "opacity-50 cursor-not-allowed",
+              className,
+            )}
+            onFocus={onFocus}
+            {...props}
+          >
+            <BaseSelect.Value placeholder={placeholder} />
+            <BaseSelect.Icon>
+              <Icon size="sm">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="m19.5 8.25-7.5 7.5-7.5-7.5"
+                />
+              </Icon>
+            </BaseSelect.Icon>
+          </BaseSelect.Trigger>
+          <BaseSelect.Portal>
+            <BaseSelect.Positioner
+              sideOffset={4}
+              className="z-50 w-[var(--anchor-width)]"
+            >
+              <BaseSelect.Popup className="max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                {options.map((option, index) => {
+                  const label =
+                    typeof option === "object" ? option.label : option;
+                  const value =
+                    typeof option === "object" ? option.value : option;
+                  return (
+                    <BaseSelect.Item
+                      key={`${value}-${index}`}
+                      value={value}
+                      className="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:bg-gray-100 data-[highlighted]:bg-gray-100 data-[selected]:font-semibold"
+                    >
+                      <BaseSelect.ItemText>{label}</BaseSelect.ItemText>
+                      <BaseSelect.ItemIndicator className="absolute inset-y-0 right-0 flex items-center pr-4 text-primary">
+                        <Icon size="sm">
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M4.5 12.75l6 6 9-13.5"
+                          />
+                        </Icon>
+                      </BaseSelect.ItemIndicator>
+                    </BaseSelect.Item>
+                  );
+                })}
+              </BaseSelect.Popup>
+            </BaseSelect.Positioner>
+          </BaseSelect.Portal>
+        </BaseSelect.Root>
+      </div>
+    );
+  },
+);
+
+Select.displayName = "Select";

package/src/ui/Separator.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "./Separator";
+import { Heading, Text } from "./Typography";
+
+const meta: Meta<typeof Separator> = {
+  title: "UI/Separator",
+  component: Separator,
+  tags: ["autodocs"],
+  argTypes: {
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Separator>;
+
+export const Default: Story = {
+  args: {
+    orientation: "horizontal",
+  },
+  render: (args) => (
+    <div className="w-64">
+      <Text>Above the separator</Text>
+      <Separator {...args} className="my-4" />
+      <Text>Below the separator</Text>
+    </div>
+  ),
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-12 p-4">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Horizontal (Default)
+        </Heading>
+        <div className="w-64">
+          <Text variant="small">Item A</Text>
+          <Separator className="my-2" />
+          <Text variant="small">Item B</Text>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Vertical
+        </Heading>
+        <div className="flex h-8 items-center gap-4 text-sm">
+          <Text variant="small">Option 1</Text>
+          <Separator orientation="vertical" />
+          <Text variant="small">Option 2</Text>
+          <Separator orientation="vertical" />
+          <Text variant="small">Option 3</Text>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Separator.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import { cn } from "./utils";
+
+export interface SeparatorProps extends React.ComponentPropsWithoutRef<
+  typeof BaseSeparator
+> {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+export const Separator = React.forwardRef<
+  React.ElementRef<typeof BaseSeparator>,
+  SeparatorProps
+>(({ className, orientation = "horizontal", ...props }, ref) => (
+  <BaseSeparator
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-gray-200",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className,
+    )}
+    {...props}
+  />
+));
+
+Separator.displayName = BaseSeparator.displayName;

package/src/ui/SettingsPanel.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SettingsPanel } from "./SettingsPanel";
+import { Button } from "./Button";
+import { Checkbox } from "./Checkbox";
+import { Heading, Text } from "./Typography";
+import { Label } from "./Label";
+
+const meta: Meta<typeof SettingsPanel> = {
+  title: "UI/SettingsPanel",
+  component: SettingsPanel,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Account Settings",
+    children: (
+      <div className="space-y-4">
+        <Text>This is the content of the settings panel.</Text>
+        <div className="flex gap-2">
+          <Button variant="primary">Save Changes</Button>
+          <Button variant="secondary">Cancel</Button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-12 p-4 max-w-2xl bg-gray-50">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Default
+        </Heading>
+        <SettingsPanel title="Notification Settings">
+          <div className="space-y-4">
+            <Text>Manage how you receive notifications.</Text>
+            <div className="flex items-center gap-2 p-2 rounded bg-white">
+              <Checkbox id="email-notif" />
+              <Label htmlFor="email-notif" className="text-sm">
+                Email Notifications
+              </Label>
+            </div>
+          </div>
+        </SettingsPanel>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          No Title
+        </Heading>
+        <SettingsPanel>
+          <Text className="italic">
+            Panel without a title rendered as a simple container.
+          </Text>
+        </SettingsPanel>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Collapsible States
+        </Heading>
+        <div className="space-y-4">
+          <SettingsPanel title="Collapsible (Default Open)" collapsible={true}>
+            <Text>This panel can be toggled and starts open.</Text>
+          </SettingsPanel>
+          <SettingsPanel
+            title="Collapsible (Default Closed)"
+            collapsible={true}
+            defaultOpen={false}
+          >
+            <Text>This panel starts closed to save space.</Text>
+          </SettingsPanel>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/SettingsPanel.tsx

@@ -0,0 +1,81 @@
+import { ReactNode } from "react";
+import { Heading } from "./Typography";
+import { cn } from "./utils";
+import { Collapsible } from "./Collapsible";
+
+export interface SettingsPanelProps {
+  /** The title of the section */
+  title?: ReactNode;
+  /** The content of the panel */
+  children: ReactNode;
+  /** Custom class for the panel wrapper */
+  className?: string;
+  /** Custom class for the content area */
+  contentClassName?: string;
+  /** Whether the panel is collapsible */
+  collapsible?: boolean;
+  /** Default state of the collapsible panel */
+  defaultOpen?: boolean;
+  /** The heading level for the title */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+/**
+ * A standardized panel for settings sections.
+ * Provides a consistent look with white background, shadow, and rounded corners.
+ */
+export function SettingsPanel({
+  title,
+  children,
+  className,
+  contentClassName,
+  collapsible,
+  defaultOpen = true,
+  headingLevel = 3,
+}: SettingsPanelProps) {
+  const content = (
+    <div className={cn("flex flex-col", contentClassName)}>{children}</div>
+  );
+
+  return (
+    <div
+      className={cn(
+        "m-2 p-4 bg-white shadow-xl rounded-lg flex flex-1 flex-col",
+        className,
+      )}
+    >
+      {collapsible ? (
+        <Collapsible
+          title={
+            typeof title === "string" ? (
+              <Heading level={headingLevel} className="text-gray-600">
+                {title}
+              </Heading>
+            ) : (
+              title
+            )
+          }
+          variant="ghost"
+          defaultOpen={defaultOpen}
+        >
+          {content}
+        </Collapsible>
+      ) : (
+        <>
+          {title && (
+            <div className="flex items-center justify-between mb-2 empty:hidden">
+              {typeof title === "string" ? (
+                <Heading level={headingLevel} className="text-gray-600">
+                  {title}
+                </Heading>
+              ) : (
+                title
+              )}
+            </div>
+          )}
+          {content}
+        </>
+      )}
+    </div>
+  );
+}