@peerbots/core 0.1.0

package/src/ui/Collapsible.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Collapsible } from "./Collapsible";
+import { Heading } from "./Typography";
+import React from "react";
+
+const meta: Meta<typeof Collapsible> = {
+  title: "UI/Collapsible",
+  component: Collapsible,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  args: {
+    title: "Click to expand",
+    children: (
+      <div className="p-4 bg-gray-50 rounded-md">
+        This is the collapsible content. It can contain any elements.
+      </div>
+    ),
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8 p-4">
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          States & Styling
+        </Heading>
+        <div className="space-y-4">
+          <Collapsible title="Initially Open" defaultOpen={true}>
+            <div className="p-4 bg-gray-50 rounded-md">
+              This content is visible by default.
+            </div>
+          </Collapsible>
+          <Collapsible
+            title={<span className="font-bold text-primary">Styled Title</span>}
+            className="border border-gray-200 rounded-lg overflow-hidden"
+          >
+            <div className="p-4">Custom styled wrapper and title.</div>
+          </Collapsible>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Variants
+        </Heading>
+        <div className="space-y-4">
+          <Collapsible title="Secondary (Default)" variant="secondary">
+            <div className="p-4 bg-gray-50 rounded-md">
+              Secondary variant content.
+            </div>
+          </Collapsible>
+          <Collapsible title="Ghost" variant="ghost">
+            <div className="p-4 bg-gray-50 rounded-md">
+              Ghost variant content.
+            </div>
+          </Collapsible>
+          <Collapsible title="Primary" variant="primary">
+            <div className="p-4 bg-gray-50 rounded-md">
+              Primary variant content.
+            </div>
+          </Collapsible>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Sizes
+        </Heading>
+        <div className="space-y-4">
+          <Collapsible title="Small" size="sm">
+            <div className="p-4 bg-gray-50 rounded-md">Small size content.</div>
+          </Collapsible>
+          <Collapsible title="Medium (Default)" size="md">
+            <div className="p-4 bg-gray-50 rounded-md">
+              Medium size content.
+            </div>
+          </Collapsible>
+          <Collapsible title="Large" size="lg">
+            <div className="p-4 bg-gray-50 rounded-md">Large size content.</div>
+          </Collapsible>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Collapsible.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { cn } from "./utils";
+import { Button, ButtonProps } from "./Button";
+import { Icon } from "./Icon";
+
+export interface CollapsibleProps {
+  title: React.ReactNode;
+  children: React.ReactNode;
+  /** The variant of the trigger button */
+  variant?: ButtonProps["variant"];
+  /** The size of the trigger button */
+  size?: ButtonProps["size"];
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+export function Collapsible({
+  title,
+  children,
+  variant = "secondary",
+  size = "md",
+  defaultOpen = false,
+  className,
+}: CollapsibleProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className={cn("w-full", className)}>
+      <Button
+        variant={variant}
+        size={size}
+        className="w-full justify-between font-medium"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        rightIcon={
+          <Icon className="h-5 w-5 text-gray-600" strokeWidth="2.5">
+            {isOpen ? (
+              <path d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+            ) : (
+              <path d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            )}
+          </Icon>
+        }
+      >
+        <span>{title}</span>
+      </Button>
+      {isOpen && (
+        <div className="px-4 pt-4 pb-2 text-sm text-gray-500">{children}</div>
+      )}
+    </div>
+  );
+}

package/src/ui/Colors.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta = {
+  title: "UI/Colors",
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+export const Variations: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-8 p-4 bg-white">
+      <div>
+        <h3 className="text-sm font-medium text-black uppercase tracking-wider border-b pb-1 mb-4">
+          Theme Colors
+        </h3>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+          <ColorItem name="Primary" variable="var(--color-primary)" />
+          <ColorItem name="Secondary" variable="var(--color-secondary)" />
+          <ColorItem name="Accent" variable="var(--color-accent)" />
+          <ColorItem name="Danger" variable="var(--color-danger)" />
+          <ColorItem name="Light BG" variable="var(--color-light-bg)" />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-medium text-black uppercase tracking-wider border-b pb-1 mb-4">
+          Extended Accent Colors
+        </h3>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          <ColorItem name="Accent HC" variable="var(--color-accent-hc)" />
+          <ColorItem name="Accent Two" variable="var(--color-accent-two)" />
+          <ColorItem
+            name="Accent Two HC"
+            variable="var(--color-accent-two-hc)"
+          />
+          <ColorItem name="Accent Three" variable="var(--color-accent-three)" />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-medium text-black uppercase tracking-wider border-b pb-1 mb-4">
+          UI Elements
+        </h3>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          <ColorItem name="Sidebar BG" variable="var(--sidebar-bg)" />
+          <ColorItem name="Dark Primary" variable="var(--color-dark-primary)" />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+function ColorItem({ name, variable }: { name: string; variable: string }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div
+        className="h-20 w-full rounded-md shadow-inner border border-gray-100"
+        style={{ backgroundColor: variable }}
+      />
+      <div className="flex flex-col">
+        <span className="text-sm font-bold text-gray-900">{name}</span>
+        <code className="text-xs text-gray-500">{variable}</code>
+      </div>
+    </div>
+  );
+}

package/src/ui/Dialog.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Dialog, DialogTitle, DialogDescription, DialogClose } from "./Dialog";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Dialog> = {
+  title: "UI/Dialog",
+  component: Dialog,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+  render: () => (
+    <Dialog trigger={<Button>Open Default Dialog</Button>}>
+      <DialogTitle className="text-xl font-bold mb-2">Dialog Title</DialogTitle>
+      <DialogDescription className="text-black mb-6">
+        This is a description of the dialog content.
+      </DialogDescription>
+      <div className="flex justify-end gap-2">
+        <DialogClose render={<Button variant="secondary">Cancel</Button>} />
+        <DialogClose render={<Button variant="primary">Confirm</Button>} />
+      </div>
+    </Dialog>
+  ),
+};

package/src/ui/Dialog.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Dialog as BaseDialog } from "@base-ui/react";
+import { cn } from "./utils";
+
+export interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean, event?: Event) => void;
+  trigger?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Dialog({
+  open,
+  onOpenChange,
+  trigger,
+  children,
+  className,
+}: DialogProps) {
+  return (
+    <BaseDialog.Root
+      open={open}
+      onOpenChange={(open, eventDetails) => {
+        onOpenChange?.(open, eventDetails?.event as Event | undefined);
+      }}
+    >
+      {trigger &&
+        (React.isValidElement(trigger) ? (
+          <BaseDialog.Trigger render={trigger as React.ReactElement} />
+        ) : (
+          <BaseDialog.Trigger>{trigger}</BaseDialog.Trigger>
+        ))}
+      <BaseDialog.Portal>
+        <BaseDialog.Backdrop className="fixed inset-0 z-50 bg-black/40 transition-all duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <BaseDialog.Popup
+          className={cn(
+            "fixed left-[50%] top-[50%] z-50 grid w-auto max-w-[90vw] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+            className,
+          )}
+        >
+          {children}
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  );
+}
+
+export const DialogTitle = (
+  props: React.ComponentProps<typeof BaseDialog.Title>,
+) => <BaseDialog.Title {...props} />;
+export const DialogDescription = (
+  props: React.ComponentProps<typeof BaseDialog.Description>,
+) => <BaseDialog.Description {...props} />;
+export const DialogClose = (
+  props: React.ComponentProps<typeof BaseDialog.Close>,
+) => <BaseDialog.Close {...props} />;

package/src/ui/Dropdown.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Menu as BaseMenu } from "@base-ui/react";
+import { cn } from "./utils";
+
+export interface DropdownProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  align?: "start" | "center" | "end";
+  className?: string;
+}
+
+export function Dropdown({
+  trigger,
+  children,
+  align = "end",
+  className,
+}: DropdownProps) {
+  return (
+    <BaseMenu.Root>
+      {React.isValidElement(trigger) ? (
+        <BaseMenu.Trigger render={trigger} />
+      ) : (
+        <BaseMenu.Trigger>{trigger}</BaseMenu.Trigger>
+      )}
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner align={align} sideOffset={5}>
+          <BaseMenu.Popup
+            className={cn(
+              "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 shadow-md 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}
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.Root>
+  );
+}
+
+export const DropdownItem = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof BaseMenu.Item>
+>(({ className, ...props }, ref) => (
+  <BaseMenu.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[highlighted]:bg-gray-100 data-[highlighted]:text-gray-900",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownItem.displayName = "DropdownItem";
+
+export const DropdownSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof BaseMenu.Separator>
+>(({ className, ...props }, ref) => (
+  <BaseMenu.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-gray-100", className)}
+    {...props}
+  />
+));
+DropdownSeparator.displayName = "DropdownSeparator";

package/src/ui/Field.stories.tsx

@@ -0,0 +1,181 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Field } from "./Field";
+import { Icon } from "./Icon";
+import { Heading } from "./Typography";
+import { Input } from "./Input";
+import { Slider } from "./Slider";
+import { Select } from "./Select";
+import { Switch } from "./Switch";
+import { NumberField } from "./NumberField";
+import { SliderWithNumberField } from "./SliderWithNumberField";
+import { Checkbox } from "./Checkbox";
+
+const meta: Meta<typeof Field> = {
+  title: "UI/Field",
+  component: Field,
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    description: { control: "text" },
+    error: { control: "text" },
+    tooltip: { control: "text" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Field>;
+
+export const Default: Story = {
+  args: {
+    label: "Email Address",
+    description: "We'll never share your email.",
+    tooltip: "Enter your primary email address",
+    children: <Input placeholder="you@example.com" />,
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-12 p-4 max-w-2xl">
+      <div className="space-y-4">
+        <Heading
+          level={4}
+          className="text-sm font-medium text-black uppercase tracking-wider"
+        >
+          Basic Inputs
+        </Heading>
+        <div className="grid gap-6">
+          <Field
+            label="Text Input"
+            description="Standard text field"
+            tooltip="Helping text"
+          >
+            <Input placeholder="Enter something..." />
+          </Field>
+          <Field label="Password" error="Password is too weak">
+            <Input type="password" defaultValue="123" />
+          </Field>
+          <Field label="Number Field">
+            <NumberField showButtons defaultValue={10} />
+          </Field>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading
+          level={4}
+          className="text-sm font-medium text-black uppercase tracking-wider"
+        >
+          Selection & Toggles
+        </Heading>
+        <div className="grid gap-6">
+          <Field label="Select Language">
+            <Select
+              options={[
+                { label: "English", value: "en" },
+                { label: "Spanish", value: "es" },
+                { label: "French", value: "fr" },
+              ]}
+              placeholder="Choose a language"
+            />
+          </Field>
+          <Field
+            label="Enable Notifications"
+            className="flex-row items-center justify-between"
+          >
+            <Switch />
+          </Field>
+          <Field
+            label="Enable automation"
+            labelPlacement="right"
+            labelWeight="normal"
+          >
+            <Checkbox id="automation" />
+          </Field>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading
+          level={4}
+          className="text-sm font-medium text-black uppercase tracking-wider"
+        >
+          Sliders
+        </Heading>
+        <div className="grid gap-6">
+          <Field label="Simple Slider" tooltip="Adjust volume">
+            <Slider defaultValue={50} />
+          </Field>
+          <Field label="Sensitivity">
+            <SliderWithNumberField
+              min={0}
+              max={10}
+              step={0.1}
+              defaultValue={5}
+            />
+          </Field>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading
+          level={4}
+          className="text-sm font-medium text-black uppercase tracking-wider"
+        >
+          Layout Variations
+        </Heading>
+        <div className="grid gap-6">
+          <Field
+            label="Label on Left"
+            labelPlacement="left"
+            description="Label to the left"
+          >
+            <Input placeholder="Enter text..." />
+          </Field>
+          <Field
+            label="Label on Right"
+            labelPlacement="right"
+            description="Label to the right"
+          >
+            <Input placeholder="Enter text..." />
+          </Field>
+          <Field label="With Search Icon" icon={<Icon name="search" />}>
+            <Input placeholder="Search..." />
+          </Field>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading
+          level={4}
+          className="text-sm font-medium text-black uppercase tracking-wider"
+        >
+          Field Groups
+        </Heading>
+        <div className="border rounded-lg p-6 bg-gray-50/50">
+          <Heading level={5} className="font-bold mb-4">
+            Settings Group
+          </Heading>
+          <div className="flex flex-col gap-4">
+            <Field
+              label="Break up long sentences"
+              labelPlacement="right"
+              labelWeight="normal"
+              description="Ensures buttons don't have too much text"
+            >
+              <Checkbox id="group-opt-1" />
+            </Field>
+            <Field
+              label="Detect emotions"
+              labelPlacement="right"
+              labelWeight="normal"
+              error="Requires active connection"
+            >
+              <Checkbox id="group-opt-2" />
+            </Field>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Field.tsx

@@ -0,0 +1,108 @@
+import { Field as BaseField } from "@base-ui/react";
+import React from "react";
+import { cn } from "./utils";
+import { Label } from "./Label";
+
+export interface FieldProps extends BaseField.Root.Props {
+  label?: string;
+  description?: string;
+  error?: string;
+  tooltip?: string;
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  labelPlacement?: "top" | "left" | "right";
+  labelWeight?: "bold" | "normal";
+}
+
+/**
+ * A wrapper component that provides a label, description, and error message for form controls.
+ * Uses Base UI's Field primitives for accessibility.
+ */
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  (
+    {
+      label,
+      description,
+      error,
+      tooltip,
+      children,
+      className,
+      icon,
+      labelPlacement = "top",
+      labelWeight = "bold",
+      ...props
+    },
+    ref,
+  ) => {
+    const isHorizontal =
+      labelPlacement === "left" || labelPlacement === "right";
+    const labelOnRight = labelPlacement === "right";
+
+    return (
+      <BaseField.Root
+        ref={ref}
+        className={cn(
+          "flex w-full",
+          isHorizontal ? "flex-col gap-1" : "flex-col gap-1.5",
+          className as string,
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            "flex",
+            isHorizontal ? "flex-row items-center gap-2" : "flex-col gap-1.5",
+          )}
+        >
+          {labelOnRight && <div className="relative">{children}</div>}
+
+          {label && (
+            <BaseField.Label
+              render={(props) => (
+                <Label
+                  tooltip={tooltip}
+                  className={cn(
+                    "mb-0",
+                    labelWeight === "normal" && "font-normal",
+                  )}
+                  {...props}
+                >
+                  <span className="flex items-center gap-1">
+                    {icon && <span className="flex-shrink-0">{icon}</span>}
+                    {label}
+                  </span>
+                </Label>
+              )}
+            />
+          )}
+
+          {!labelOnRight && <div className="relative">{children}</div>}
+        </div>
+
+        {description && (
+          <BaseField.Description
+            className={cn(
+              "text-xs text-gray-500",
+              labelOnRight && "ml-7", // Aligns description with label text when child is on left
+            )}
+          >
+            {description}
+          </BaseField.Description>
+        )}
+
+        {error && (
+          <BaseField.Error
+            className={cn(
+              "text-xs text-red-600 font-medium",
+              labelOnRight && "ml-7",
+            )}
+          >
+            {error}
+          </BaseField.Error>
+        )}
+      </BaseField.Root>
+    );
+  },
+);
+
+Field.displayName = "Field";