@peerbots/core 0.2.6 → 1.0.0

package/src/ui/{Slider.tsx → forms/Slider.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
 import { Slider as BaseSlider } from "@base-ui/react";
-import { cn } from "./utils";
+import { cn } from "../utils";
 
-export interface SliderProps {
+export interface SliderProps extends React.AriaAttributes {
   min?: number;
   max?: number;
   step?: number;
@@ -28,6 +28,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
       onChange,
       name,
       icon,
+      "aria-label": ariaLabel,
       ...props
     },
     ref,
@@ -81,7 +82,10 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
               <BaseSlider.Track className="pb:relative pb:bg-gray-200 pb:rounded-full pb:w-full pb:h-1.5 pb:overflow-hidden pb:transition-colors group-pb:hover:bg-gray-300">
                 <BaseSlider.Indicator className="pb:absolute pb:bg-primary pb:rounded-full pb:h-full" />
               </BaseSlider.Track>
-              <BaseSlider.Thumb className="pb:z-10 pb:block pb:w-4.5 pb:h-4.5 pb:bg-white pb:shadow-md pb:rounded-full pb:border-2 pb:border-primary focus:pb:outline-none focus:pb:ring-4 focus:pb:ring-primary/20 pb:cursor-grab active:pb:cursor-grabbing pb:hover:scale-110 active:pb:scale-95 pb:transition-transform" />
+              <BaseSlider.Thumb
+                aria-label={ariaLabel || (name ? name : "Slider")}
+                className="pb:z-10 pb:block pb:w-4.5 pb:h-4.5 pb:bg-white pb:shadow-md pb:rounded-full pb:border-2 pb:border-primary focus:pb:outline-none focus:pb:ring-4 focus:pb:ring-primary/20 pb:cursor-grab active:pb:cursor-grabbing pb:hover:scale-110 active:pb:scale-95 pb:transition-transform"
+              />
             </BaseSlider.Control>
           </BaseSlider.Root>
         </div>

package/src/ui/forms/SliderWithNumberField.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SliderWithNumberField from "./SliderWithNumberField";
+import React, { useState } from "react";
+import { Heading, Text } from "../foundations/Typography";
+
+const meta: Meta<typeof SliderWithNumberField> = {
+  title: "Forms/SliderWithNumberField",
+  component: SliderWithNumberField,
+  argTypes: {
+    onChange: { action: "changed" },
+    min: { control: { type: "number" } },
+    max: { control: { type: "number" } },
+    step: { control: { type: "number" } },
+    disabled: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SliderWithNumberField>;
+
+const InteractiveSliderWithNumberField = (
+  props: React.ComponentProps<typeof SliderWithNumberField>,
+) => {
+  const [value, setValue] = useState(props.value || props.defaultValue || 0);
+  return (
+    <SliderWithNumberField
+      {...props}
+      value={value}
+      onChange={(v) => {
+        setValue(v);
+        props.onChange?.(v as number, new Event("change")); // Match signature
+      }}
+    />
+  );
+};
+
+export const Default: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    defaultValue: 50,
+  },
+  render: (args) => (
+    <div className="pb:p-6 pb:bg-white pb:rounded-2xl pb:border pb:border-gray-200 pb:shadow-xs pb:w-[420px] pb:space-y-2">
+      <div className="pb:flex pb:justify-between pb:items-center pb:mb-1">
+        <Text size="sm" weight="bold">Output Volume</Text>
+        <Text size="xs" color="muted">0 – 100%</Text>
+      </div>
+      <InteractiveSliderWithNumberField
+        aria-label="Output volume"
+        {...(args as React.ComponentProps<typeof SliderWithNumberField>)}
+      />
+    </div>
+  ),
+};
+
+export const WithStepperButtons: Story = {
+  render: () => (
+    <div className="pb:p-6 pb:bg-white pb:rounded-2xl pb:border pb:border-gray-200 pb:shadow-xs pb:w-[460px] pb:space-y-2">
+      <div className="pb:flex pb:justify-between pb:items-center pb:mb-1">
+        <Text size="sm" weight="bold">Head Tilt Angle</Text>
+        <Text size="xs" color="muted">-45° to +45°</Text>
+      </div>
+      <InteractiveSliderWithNumberField
+        aria-label="Head tilt angle"
+        min={-45}
+        max={45}
+        defaultValue={0}
+        step={1}
+        showButtons={true}
+      />
+    </div>
+  ),
+};
+
+export const DecimalPrecision: Story = {
+  render: () => (
+    <div className="pb:p-6 pb:bg-white pb:rounded-2xl pb:border pb:border-gray-200 pb:shadow-xs pb:w-[420px] pb:space-y-2">
+      <div className="pb:flex pb:justify-between pb:items-center pb:mb-1">
+        <Text size="sm" weight="bold">Speaking Pitch Multiplier</Text>
+        <Text size="xs" color="muted">0.5x – 2.0x (step 0.05)</Text>
+      </div>
+      <InteractiveSliderWithNumberField
+        aria-label="Speaking pitch multiplier"
+        min={0.5}
+        max={2.0}
+        step={0.05}
+        defaultValue={1.0}
+      />
+    </div>
+  ),
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-8 pb:p-4 pb:max-w-lg">
+      <div className="pb:space-y-4">
+        <span className="pb:text-xs pb:font-bold pb:text-gray-700 pb:uppercase pb:tracking-wider pb:block">
+          Robot Motor & Audio Settings
+        </span>
+        <div className="pb:space-y-6 pb:p-6 pb:bg-gray-50 pb:rounded-2xl pb:border pb:border-gray-200">
+          <div className="pb:space-y-1.5">
+            <Text size="xs" weight="bold">Motor Sensitivity</Text>
+            <InteractiveSliderWithNumberField
+              aria-label="Motor sensitivity"
+              min={1}
+              max={10}
+              defaultValue={7}
+            />
+          </div>
+
+          <div className="pb:space-y-1.5">
+            <Text size="xs" weight="bold">Eye Blink Frequency (Hz)</Text>
+            <InteractiveSliderWithNumberField
+              aria-label="Eye blink frequency"
+              min={0.1}
+              max={5.0}
+              step={0.1}
+              defaultValue={1.2}
+              showButtons={true}
+            />
+          </div>
+
+          <div className="pb:space-y-1.5">
+            <Text size="xs" weight="bold" color="muted">Disabled Axis (Locked)</Text>
+            <InteractiveSliderWithNumberField
+              aria-label="Locked axis"
+              disabled
+              defaultValue={0}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/{SliderWithNumberField.tsx → forms/SliderWithNumberField.tsx}

@@ -1,9 +1,9 @@
 import React from "react";
 import { Slider } from "./Slider";
 import { NumberField } from "./NumberField";
-import { cn } from "./utils";
+import { cn } from "../utils";
 
-export interface SliderWithNumberFieldProps {
+export interface SliderWithNumberFieldProps extends React.AriaAttributes {
   min?: number;
   max?: number;
   step?: number;
@@ -13,6 +13,7 @@ export interface SliderWithNumberFieldProps {
   onChange?: (value: number, event: Event) => void;
   className?: string;
   inputWidth?: string;
+  showButtons?: boolean;
 }
 
 export const SliderWithNumberField = React.forwardRef<
@@ -29,7 +30,9 @@ export const SliderWithNumberField = React.forwardRef<
       defaultValue,
       disabled,
       onChange,
-      inputWidth = "w-20",
+      inputWidth,
+      showButtons = false,
+      "aria-label": ariaLabel,
       ...props
     },
     ref,
@@ -41,16 +44,23 @@ export const SliderWithNumberField = React.forwardRef<
       }
     };
 
+    const defaultWidth = showButtons ? "pb:w-28" : "pb:w-20";
+    const widthClass = inputWidth
+      ? inputWidth.startsWith("pb:")
+        ? inputWidth
+        : `pb:${inputWidth}`
+      : defaultWidth;
+
     return (
       <div
         ref={ref}
         className={cn(
-          "pb:flex pb:flex-row pb:items-center pb:gap-4 pb:w-full pb:min-w-0 pb:sm:flex-nowrap pb:flex-wrap",
+          "pb:flex pb:items-center pb:gap-3 pb:w-full pb:min-w-0",
           className,
         )}
         {...props}
       >
-        <div className="pb:flex-grow pb:min-w-[120px]">
+        <div className="pb:flex-1 pb:min-w-0">
           <Slider
             min={min}
             max={max}
@@ -58,11 +68,12 @@ export const SliderWithNumberField = React.forwardRef<
             value={value}
             defaultValue={defaultValue}
             disabled={disabled}
+            aria-label={ariaLabel ? `${ariaLabel} slider` : "Slider value"}
             onChange={handleChange}
             className="pb:w-full"
           />
         </div>
-        <div className={cn(inputWidth, "pb:shrink-0")}>
+        <div className={cn(widthClass, "pb:shrink-0")}>
           <NumberField
             value={value}
             defaultValue={defaultValue}
@@ -70,12 +81,13 @@ export const SliderWithNumberField = React.forwardRef<
             max={max}
             step={step}
             disabled={disabled}
+            aria-label={ariaLabel ? `${ariaLabel} input` : "Numeric input"}
             onChange={(val, event) => {
               if (val !== null) {
                 handleChange(val, event);
               }
             }}
-            showButtons={false}
+            showButtons={showButtons}
           />
         </div>
       </div>

package/src/ui/{Switch.stories.tsx → forms/Switch.stories.tsx}

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Switch } from "./Switch";
 import { useState } from "react";
-import { Heading, Text } from "./Typography";
+import { Heading, Text } from "../foundations/Typography";
 
 const meta: Meta<typeof Switch> = {
-  title: "UI/Switch",
+  title: "Forms/Switch",
   component: Switch,
   tags: ["autodocs"],
   argTypes: {

package/src/ui/{Switch.tsx → forms/Switch.tsx}

@@ -1,6 +1,6 @@
 import React from "react";
 import { Switch as BaseSwitch } from "@base-ui/react";
-import { cn } from "./utils";
+import { cn } from "../utils";
 
 export interface SwitchProps extends React.AriaAttributes {
   checked?: boolean;

package/src/ui/{TabRadio.stories.tsx → forms/TabRadio.stories.tsx}

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { TabRadio, TabRadioOption } from "./TabRadio";
 import { useState } from "react";
-import { Icon } from "./Icon";
-import { Heading, Text } from "./Typography";
+import { Icon } from "../foundations/Icon";
+import { Heading, Text } from "../foundations/Typography";
 import React from "react";
 
 const meta = {
-  title: "UI/TabRadio",
+  title: "Forms/TabRadio",
   component: TabRadio,
   parameters: {
     layout: "centered",

package/src/ui/{TabRadio.tsx → forms/TabRadio.tsx}

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { cn } from "./utils";
+import { cn } from "../utils";
 import { Toggle, ToggleGroup } from "@base-ui/react";
 
 export interface TabRadioOption<T extends string> {

package/src/ui/{TextArea.stories.tsx → forms/TextArea.stories.tsx}

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { TextArea } from "./TextArea";
-import { Heading, Text } from "./Typography";
+import { Heading, Text } from "../foundations/Typography";
 
 const meta: Meta<typeof TextArea> = {
-  title: "UI/TextArea",
+  title: "Forms/TextArea",
   component: TextArea,
   tags: ["autodocs"],
   argTypes: {},
@@ -30,13 +30,14 @@ export const Variations: Story = {
             <Text variant="small" className="pb:font-bold">
               With Predefined Value
             </Text>
-            <TextArea defaultValue="This is some predefined text in the textarea." />
+            <TextArea aria-label="Predefined message" defaultValue="This is some predefined text in the textarea." />
           </div>
           <div className="pb:space-y-1">
             <Text variant="small" className="pb:font-bold">
               Large (10 rows)
             </Text>
             <TextArea
+              aria-label="Extended description"
               rows={10}
               placeholder="A larger textarea for more content..."
             />
@@ -53,6 +54,7 @@ export const Variations: Story = {
             Disabled
           </Text>
           <TextArea
+            aria-label="Disabled message"
             disabled
             placeholder="Cannot type here"
             defaultValue="Read only content"

package/src/ui/{TextArea.tsx → forms/TextArea.tsx}

@@ -1,6 +1,6 @@
 import { Input as BaseInput } from "@base-ui/react";
 import React, { ComponentPropsWithoutRef } from "react";
-import { cn } from "./utils";
+import { cn } from "../utils";
 
 export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 

package/src/ui/forms/index.ts

@@ -0,0 +1,15 @@
+export * from "./Button";
+export * from "./Input";
+export * from "./Select";
+export * from "./Slider";
+export * from "./SliderWithNumberField";
+export * from "./Dropdown";
+export * from "./Switch";
+export * from "./Label";
+export * from "./TabRadio";
+export * from "./NumberField";
+export * from "./Field";
+export * from "./TextArea";
+export * from "./Checkbox";
+export * from "./PeerbotsColorSelector";
+export * from "./ChipGroup";

package/src/ui/foundations/Anchor.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Anchor } from "./Anchor";
+import React from "react";
+
+const meta: Meta<typeof Anchor> = {
+  title: "Foundations/Anchor",
+  component: Anchor,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Anchor>;
+
+export const Default: Story = {
+  args: {
+    children: "Learn more about Peerbots",
+    href: "https://peerbots.org",
+    target: "_blank",
+    color: "teal",
+    underline: "hover",
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-4 pb:p-6 pb:bg-white pb:max-w-md">
+      <Anchor href="#" color="default">Default Link</Anchor>
+      <Anchor href="#" color="teal">Teal Brand Link</Anchor>
+      <Anchor href="#" color="pink">Pink Brand Link</Anchor>
+      <Anchor href="#" color="muted">Muted Help Link</Anchor>
+      <Anchor href="#" color="teal" underline="always">Always Underlined Link</Anchor>
+      <Anchor href="#" color="default" variant="ghost">Ghost Interactive Link</Anchor>
+    </div>
+  ),
+};

package/src/ui/foundations/Anchor.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { cn } from "../utils";
+import { ComponentColor } from "../types";
+
+export interface AnchorProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Palette color or semantic intent.
+   * @default "default"
+   */
+  color?: ComponentColor | "muted" | "default";
+  /**
+   * Underline text decoration control.
+   * @default "hover"
+   */
+  underline?: "hover" | "always" | "none";
+  /**
+   * Interaction style variant.
+   * @default "default"
+   */
+  variant?: "default" | "ghost";
+  /** Polymorphic component wrapper (e.g. react-router Link, Next.js Link) */
+  as?: React.ElementType;
+  /** Custom render prop */
+  render?: (
+    props: React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  ) => React.ReactElement;
+}
+
+export type LinkProps = AnchorProps;
+
+const colorClasses: Record<string, string> = {
+  default: "pb:text-gray-900 pb:hover:text-peerbots-darkteal",
+  neutral: "pb:text-gray-700 pb:hover:text-gray-950",
+  muted: "pb:text-gray-600 pb:hover:text-gray-900",
+  teal: "pb:text-peerbots-darkteal pb:hover:text-teal-950 pb:font-semibold",
+  pink: "pb:text-rose-800 pb:hover:text-rose-950 pb:font-semibold",
+  primary: "pb:text-dark-primary pb:hover:text-teal-950 pb:font-semibold",
+  darkteal: "pb:text-peerbots-darkteal pb:hover:text-teal-950 pb:font-semibold",
+  darkblue: "pb:text-peerbots-darkblue pb:hover:text-teal-900 pb:font-semibold",
+  danger: "pb:text-red-700 pb:hover:text-red-900 pb:font-semibold",
+};
+
+const underlineClasses = {
+  hover: "pb:hover:underline pb:underline-offset-4 pb:decoration-current",
+  always: "pb:underline pb:underline-offset-4 pb:decoration-current",
+  none: "pb:no-underline",
+};
+
+const Anchor = React.forwardRef<HTMLAnchorElement, AnchorProps>(
+  (
+    {
+      className,
+      href,
+      target,
+      color = "default",
+      underline = "hover",
+      variant = "default",
+      as: Component = "a",
+      render,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const commonClass = cn(
+      "pb:transition-colors pb:duration-150 pb:cursor-pointer pb:font-medium pb:inline-flex pb:items-center pb:gap-1",
+      colorClasses[color] || colorClasses.default,
+      underlineClasses[underline],
+      variant === "ghost" && "pb:px-2 pb:py-1 pb:rounded-lg pb:hover:bg-gray-100",
+      className,
+    );
+
+    const anchorProps = {
+      href,
+      target,
+      className: commonClass,
+      ...props,
+    };
+
+    if (render) {
+      return render(anchorProps);
+    }
+
+    return (
+      <Component ref={ref} {...anchorProps}>
+        {children}
+      </Component>
+    );
+  },
+);
+
+Anchor.displayName = "Anchor";
+
+export const Link = Anchor;
+export { Anchor };

package/src/ui/foundations/CodeBlock.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeBlock } from "./CodeBlock";
+import React from "react";
+
+const meta: Meta<typeof CodeBlock> = {
+  title: "Foundations/CodeBlock",
+  component: CodeBlock,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CodeBlock>;
+
+export const Default: Story = {
+  args: {
+    code: "npm install @peerbots/core",
+    language: "bash",
+    variant: "default",
+    showLineNumbers: false,
+  },
+};
+
+export const WindowVariant: Story = {
+  args: {
+    code: `import { Button, Card, Heading } from "@peerbots/core";
+
+export function WelcomeCard() {
+  return (
+    <Card variant="elevated" padding="lg">
+      <Heading level={2} variant="marketing-teal">Welcome to Peerbots</Heading>
+      <Button variant="marketing-teal">Get Started</Button>
+    </Card>
+  );
+}`,
+    language: "tsx",
+    fileName: "WelcomeCard.tsx",
+    variant: "window",
+    showLineNumbers: true,
+  },
+};
+
+export const MultiLineWithNumbers: Story = {
+  args: {
+    code: `const config = {
+  apiKey: process.env.PEERBOTS_API_KEY,
+  endpoint: "https://api.peerbots.org/v1",
+  timeout: 5000,
+};
+
+export default config;`,
+    language: "typescript",
+    variant: "default",
+    showLineNumbers: true,
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:w-[540px] pb:space-y-6">
+      <div>
+        <h4 className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:mb-2">
+          Standard Clean CodeBlock (Default)
+        </h4>
+        <CodeBlock
+          code="git clone https://github.com/peerbots/peerbots-core.git"
+          language="bash"
+        />
+      </div>
+
+      <div>
+        <h4 className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:mb-2">
+          Window / File Box Variant
+        </h4>
+        <CodeBlock
+          code="echo 'Running robot face session...'"
+          language="bash"
+          fileName="start.sh"
+          variant="window"
+        />
+      </div>
+    </div>
+  ),
+};