@peerbots/core 0.1.0

package/src/ui/Skeleton.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "./Skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "UI/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  args: {
+    className: "w-[250px] h-4",
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="flex flex-col space-y-3">
+      {/* Circle Skeleton */}
+      <Skeleton className="h-12 w-12 rounded-full" />
+
+      {/* Rectangular Skeletons */}
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+
+      <div className="flex items-center space-x-4 mt-6">
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-[250px]" />
+          <Skeleton className="h-4 w-[200px]" />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/Skeleton.tsx

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from "react";
+import { cn } from "./utils";
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-gray-200/50", className)}
+      {...props}
+    />
+  );
+}

package/src/ui/Slider.stories.tsx

@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Slider } from "./Slider";
+import { Input } from "./Input";
+import { Heading, Text } from "./Typography";
+
+const meta: Meta<typeof Slider> = {
+  title: "UI/Slider",
+  component: Slider,
+  argTypes: {
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+const InteractiveSlider = (props: React.ComponentProps<typeof Slider>) => {
+  const [value, setValue] = useState(
+    Array.isArray(props.value) ? props.value[0] : (props.value ?? 0),
+  );
+
+  return (
+    <div className="space-y-2">
+      <div className="w-80">
+        <Slider
+          {...props}
+          value={value}
+          onChange={(v) => {
+            const newVal = Array.isArray(v) ? v[0] : v;
+            setValue(newVal);
+            props.onChange?.(v, null as unknown as Event);
+          }}
+        />
+      </div>
+      <Text variant="small" className="text-slate-500">
+        Value: {value}
+      </Text>
+    </div>
+  );
+};
+
+const RangeChangeableSlider = ({
+  args,
+}: {
+  args: React.ComponentProps<typeof Slider>;
+}) => {
+  const [min, setMin] = useState(0);
+  const [max, setMax] = useState(100);
+  const [val, setVal] = useState(50);
+
+  return (
+    <div className="space-y-4 border p-4 rounded-lg bg-white shadow-sm">
+      <Slider
+        {...args}
+        min={min}
+        max={max}
+        value={val}
+        onChange={(v: number | number[]) => setVal(Array.isArray(v) ? v[0] : v)}
+      />
+      <div className="flex space-x-4">
+        <div className="flex flex-col gap-1">
+          <Text
+            variant="small"
+            className="uppercase text-slate-400 font-bold text-[10px]"
+          >
+            Min
+          </Text>
+          <Input
+            type="number"
+            value={min}
+            onChange={(e) => setMin(Number(e.target.value))}
+            className="w-20"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <Text
+            variant="small"
+            className="uppercase text-slate-400 font-bold text-[10px]"
+          >
+            Max
+          </Text>
+          <Input
+            type="number"
+            value={max}
+            onChange={(e) => setMax(Number(e.target.value))}
+            className="w-20"
+          />
+        </div>
+        <div className="flex flex-col justify-end">
+          <Text variant="small" className="text-slate-600 font-medium">
+            Current: {val}
+          </Text>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    value: 50,
+  },
+  render: (args) => <InteractiveSlider {...args} />,
+};
+
+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">
+          Width Responsiveness
+        </Heading>
+        <div className="space-y-6">
+          <div className="space-y-1">
+            <Text variant="small" className="italic text-black">
+              Full Width (Container Default)
+            </Text>
+            <Slider defaultValue={30} />
+          </div>
+          <div className="space-y-1 w-40">
+            <Text variant="small" className="italic text-black">
+              Narrow (w-40)
+            </Text>
+            <Slider defaultValue={70} />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Dynamic Range Test
+        </Heading>
+        <RangeChangeableSlider args={{}} />
+      </div>
+    </div>
+  ),
+};

package/src/ui/Slider.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { Slider as BaseSlider } from "@base-ui/react";
+import { cn } from "./utils";
+
+export interface SliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number;
+  defaultValue?: number;
+  disabled?: boolean;
+  onChange?: (value: number | number[], event: Event) => void;
+  className?: string;
+  name?: string;
+  icon?: React.ReactNode;
+}
+
+export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+  (
+    {
+      className,
+      min = 0,
+      max = 100,
+      step = 1,
+      value,
+      defaultValue,
+      disabled,
+      onChange,
+      name,
+      icon,
+      ...props
+    },
+    ref,
+  ) => {
+    const handleChange = (val: number | number[], event: Event) => {
+      if (onChange) {
+        onChange(val, event);
+      }
+    };
+
+    return (
+      <div className={cn("w-full flex items-center gap-4", className)}>
+        {icon && <div className="text-gray-500 shrink-0">{icon}</div>}
+
+        <div className="flex-grow flex items-center h-8 min-w-[120px]">
+          <BaseSlider.Root
+            ref={ref}
+            min={min}
+            max={max}
+            step={step}
+            value={
+              value !== undefined
+                ? Array.isArray(value)
+                  ? value
+                  : [value]
+                : undefined
+            }
+            defaultValue={
+              defaultValue !== undefined
+                ? Array.isArray(defaultValue)
+                  ? defaultValue
+                  : [defaultValue]
+                : undefined
+            }
+            disabled={disabled}
+            orientation="horizontal"
+            {...props}
+            onValueChange={(val, details) => {
+              const event =
+                (details as { event?: Event })?.event ||
+                (window.event as unknown as Event);
+              handleChange(val as number | number[], event);
+            }}
+            className={cn(
+              "relative flex items-center w-full h-full group touch-none select-none",
+              disabled && "opacity-50 cursor-not-allowed",
+              className,
+            )}
+          >
+            <BaseSlider.Control className="flex items-center w-full h-full relative cursor-pointer">
+              <BaseSlider.Track className="relative bg-gray-200 rounded-full w-full h-1.5 overflow-hidden transition-colors group-hover:bg-gray-300">
+                <BaseSlider.Indicator className="absolute bg-primary rounded-full h-full" />
+              </BaseSlider.Track>
+              <BaseSlider.Thumb className="z-10 block w-4.5 h-4.5 bg-white shadow-md rounded-full border-2 border-primary focus:outline-none focus:ring-4 focus:ring-primary/20 cursor-grab active:cursor-grabbing hover:scale-110 active:scale-95 transition-transform" />
+            </BaseSlider.Control>
+          </BaseSlider.Root>
+        </div>
+        {/* Hidden input to support form submission if needed */}
+        {name && <input type="hidden" name={name} value={value} />}
+      </div>
+    );
+  },
+);
+
+Slider.displayName = "Slider";

package/src/ui/SliderWithNumberField.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SliderWithNumberField from "./SliderWithNumberField";
+import React, { useState } from "react";
+import { Heading, Text } from "./Typography";
+
+const meta: Meta<typeof SliderWithNumberField> = {
+  title: "UI/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="w-80 p-4">
+      <InteractiveSliderWithNumberField
+        {...(args as React.ComponentProps<typeof SliderWithNumberField>)}
+      />
+    </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">
+          Responsive Layouts
+        </Heading>
+        <div className="space-y-8 max-w-lg">
+          <div className="space-y-2">
+            <Text variant="small" className="font-bold underline">
+              Flexible (Full width of container)
+            </Text>
+            <InteractiveSliderWithNumberField defaultValue={50} />
+          </div>
+
+          <div className="space-y-2 w-64 border-l border-r border-dotted px-2 bg-gray-50 py-4">
+            <Text variant="small" className="font-bold underline">
+              Narrow Container (w-64)
+            </Text>
+            <InteractiveSliderWithNumberField defaultValue={50} />
+          </div>
+
+          <div className="space-y-2 w-48 border-l border-r border-dotted px-2 bg-gray-50 py-4">
+            <Text variant="small" className="font-bold underline">
+              Very Narrow (w-48) - Wraps
+            </Text>
+            <InteractiveSliderWithNumberField defaultValue={50} />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Configuration
+        </Heading>
+        <div className="space-y-4 max-w-sm">
+          <div className="space-y-1">
+            <Text variant="small">Custom Step (0.5)</Text>
+            <InteractiveSliderWithNumberField
+              step={0.5}
+              defaultValue={2.5}
+              min={0}
+              max={10}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/SliderWithNumberField.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Slider } from "./Slider";
+import { NumberField } from "./NumberField";
+import { cn } from "./utils";
+
+export interface SliderWithNumberFieldProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number;
+  defaultValue?: number;
+  disabled?: boolean;
+  onChange?: (value: number, event: Event) => void;
+  className?: string;
+  inputWidth?: string;
+}
+
+export const SliderWithNumberField = React.forwardRef<
+  HTMLDivElement,
+  SliderWithNumberFieldProps
+>(
+  (
+    {
+      className,
+      min = 0,
+      max = 100,
+      step = 1,
+      value,
+      defaultValue,
+      disabled,
+      onChange,
+      inputWidth = "w-20",
+      ...props
+    },
+    ref,
+  ) => {
+    const handleChange = (val: number | number[], event: Event) => {
+      if (onChange) {
+        const newValue = Array.isArray(val) ? val[0] : val;
+        onChange(newValue, event);
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-row items-center gap-4 w-full min-w-0 sm:flex-nowrap flex-wrap",
+          className,
+        )}
+        {...props}
+      >
+        <div className="flex-grow min-w-[120px]">
+          <Slider
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            defaultValue={defaultValue}
+            disabled={disabled}
+            onChange={handleChange}
+            className="w-full"
+          />
+        </div>
+        <div className={cn(inputWidth, "shrink-0")}>
+          <NumberField
+            value={value}
+            defaultValue={defaultValue}
+            min={min}
+            max={max}
+            step={step}
+            disabled={disabled}
+            onChange={(val, event) => {
+              if (val !== null) {
+                handleChange(val, event);
+              }
+            }}
+            showButtons={false}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+SliderWithNumberField.displayName = "SliderWithNumberField";
+
+export default SliderWithNumberField;

package/src/ui/Switch.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "./Switch";
+import { useState } from "react";
+import { Heading, Text } from "./Typography";
+
+const meta: Meta<typeof Switch> = {
+  title: "UI/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+  argTypes: {
+    checked: { control: "boolean" },
+    disabled: { control: "boolean" },
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  args: {
+    "aria-label": "Default switch",
+  },
+};
+
+const InteractiveSwitch = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div className="flex flex-col gap-2">
+      <Switch
+        checked={checked}
+        onChange={(val) => setChecked(val)}
+        aria-label="Interactive switch"
+      />
+      <Text variant="small">
+        The switch is currently {checked ? "on" : "off"}.
+      </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">
+          States
+        </Heading>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-2">
+            <Switch defaultChecked={false} aria-label="Unchecked switch" />
+            <Text variant="small">Unchecked</Text>
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch defaultChecked={true} aria-label="Checked switch" />
+            <Text variant="small">Checked</Text>
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch disabled aria-label="Disabled switch" />
+            <Text variant="small">Disabled Unchecked</Text>
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch
+              disabled
+              defaultChecked={true}
+              aria-label="Disabled checked switch"
+            />
+            <Text variant="small">Disabled Checked</Text>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Heading level={4} className="text-sm font-medium text-black uppercase">
+          Interactive
+        </Heading>
+        <InteractiveSwitch />
+      </div>
+    </div>
+  ),
+};

package/src/ui/Switch.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Switch as BaseSwitch } from "@base-ui/react";
+import { cn } from "./utils";
+
+export interface SwitchProps extends React.AriaAttributes {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean, event: Event) => void;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  name?: string;
+}
+
+export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    {
+      checked,
+      defaultChecked,
+      onChange,
+      disabled,
+      className,
+      id: externalId,
+      ...props
+    },
+    ref,
+  ) => {
+    const autoId = React.useId();
+    const id = externalId ?? autoId;
+    return (
+      <div className={cn("flex items-center gap-2", className)}>
+        <BaseSwitch.Root
+          ref={ref}
+          id={id}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          onCheckedChange={(checked, eventDetails) => {
+            onChange?.(checked, eventDetails?.event as Event);
+          }}
+          disabled={disabled}
+          className={cn(
+            "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+            "data-[checked]:bg-primary data-[unchecked]:bg-gray-200",
+            disabled && "opacity-50 cursor-not-allowed",
+          )}
+          {...props}
+        >
+          <BaseSwitch.Thumb
+            className={cn(
+              "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
+              "data-[checked]:translate-x-5 data-[unchecked]:translate-x-0",
+            )}
+          />
+        </BaseSwitch.Root>
+      </div>
+    );
+  },
+);
+
+Switch.displayName = "Switch";