@peerbots/core 0.2.6 → 1.0.0

package/src/ui/feedback/Popover.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import { Popover as BasePopover } from "@base-ui/react";
+import { cn } from "../utils";
+import { Icon } from "../foundations/Icon";
+import { SurfaceVariant } from "../types";
+
+export interface PopoverProps {
+  /** The element that triggers the popover when clicked */
+  trigger: React.ReactNode;
+  /** Popover body content */
+  children: React.ReactNode;
+  /** Optional header title */
+  title?: React.ReactNode;
+  /** Controlled open state */
+  open?: boolean;
+  /** Initial open state in uncontrolled mode */
+  defaultOpen?: boolean;
+  /** Callback fired when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Side where the popover appears */
+  side?: "top" | "bottom" | "left" | "right";
+  /** Alignment relative to the trigger */
+  align?: "start" | "center" | "end";
+  /** Distance from the trigger in pixels */
+  sideOffset?: number;
+  /** Surface visual variant */
+  variant?: SurfaceVariant | "default";
+  /** Whether to show a close button in the header */
+  showCloseButton?: boolean;
+  /** Whether to display a pointing arrow */
+  showArrow?: boolean;
+  className?: string;
+}
+
+const variantStyles: Record<string, string> = {
+  surface: "pb:bg-white pb:border pb:border-gray-100 pb:shadow-xl",
+  default: "pb:bg-white pb:border pb:border-gray-100 pb:shadow-xl",
+  glass:
+    "pb:bg-white/90 pb:backdrop-blur-2xl pb:border pb:border-white/50 pb:shadow-2xl",
+  outline: "pb:bg-white pb:border-2 pb:border-gray-300 pb:shadow-md",
+  flat: "pb:bg-gray-50 pb:border pb:border-gray-200 pb:shadow-lg",
+};
+
+export function Popover({
+  trigger,
+  children,
+  title,
+  open,
+  defaultOpen,
+  onOpenChange,
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  variant = "surface",
+  showCloseButton = true,
+  showArrow = true,
+  className,
+}: PopoverProps) {
+  return (
+    <BasePopover.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={(nextOpen) => {
+        onOpenChange?.(nextOpen);
+      }}
+    >
+      {React.isValidElement(trigger) ? (
+        <BasePopover.Trigger render={trigger as React.ReactElement} />
+      ) : (
+        <BasePopover.Trigger>{trigger}</BasePopover.Trigger>
+      )}
+
+      <BasePopover.Portal>
+        <BasePopover.Positioner
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+        >
+          <BasePopover.Popup
+            className={cn(
+              "pb:z-50 pb:rounded-2xl pb:p-4 pb:min-w-[240px] pb:max-w-sm pb:text-gray-900 pb:transition-all pb:duration-150 data-[state=open]:pb:animate-in data-[state=closed]:pb:animate-out data-[state=closed]:pb:fade-out-0 data-[state=open]:pb:fade-in-0 data-[state=closed]:pb:zoom-out-95 data-[state=open]:pb:zoom-in-95",
+              variantStyles[variant] || variantStyles.surface,
+              className,
+            )}
+          >
+            {(title || showCloseButton) && (
+              <div className="pb:flex pb:items-center pb:justify-between pb:gap-3 pb:border-b pb:border-gray-100 pb:pb-2.5 pb:mb-3">
+                {title ? (
+                  <div className="pb:text-xs pb:font-bold pb:text-gray-900 pb:uppercase pb:tracking-wider">
+                    {title}
+                  </div>
+                ) : (
+                  <div />
+                )}
+
+                {showCloseButton && (
+                  <BasePopover.Close
+                    aria-label="Close popover"
+                    className="pb:p-1 pb:rounded-lg pb:text-gray-400 pb:hover:text-gray-700 pb:hover:bg-gray-100 pb:transition-colors pb:cursor-pointer"
+                  >
+                    <Icon name="xCircle" className="pb:w-4 pb:h-4" />
+                  </BasePopover.Close>
+                )}
+              </div>
+            )}
+
+            <div className="pb:text-sm">{children}</div>
+
+            {showArrow && (
+              <BasePopover.Arrow
+                className={cn(
+                  variant === "glass"
+                    ? "pb:fill-white/90 pb:stroke-white/50"
+                    : "pb:fill-white pb:stroke-gray-100",
+                )}
+              />
+            )}
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    </BasePopover.Root>
+  );
+}
+
+export const PopoverTitle = (
+  props: React.ComponentProps<typeof BasePopover.Title>,
+) => <BasePopover.Title {...props} />;
+
+export const PopoverDescription = (
+  props: React.ComponentProps<typeof BasePopover.Description>,
+) => <BasePopover.Description {...props} />;
+
+export const PopoverClose = (
+  props: React.ComponentProps<typeof BasePopover.Close>,
+) => <BasePopover.Close {...props} />;

package/src/ui/feedback/Skeleton.stories.tsx

@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "./Skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Feedback/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="pb:flex pb:items-center pb:gap-4 pb:p-6 pb:bg-white pb:rounded-2xl pb:border pb:border-gray-200 pb:shadow-xs pb:w-[380px]">
+      <Skeleton className="pb:h-12 pb:w-12 pb:rounded-full pb:shrink-0" />
+      <div className="pb:space-y-2 pb:flex-1">
+        <Skeleton className="pb:h-4 pb:w-3/4 pb:rounded-md" />
+        <Skeleton className="pb:h-3 pb:w-1/2 pb:rounded-md" />
+      </div>
+    </div>
+  ),
+};
+
+export const CardPlaceholder: Story = {
+  render: () => (
+    <div className="pb:p-6 pb:bg-white pb:rounded-2xl pb:border pb:border-gray-200 pb:shadow-sm pb:w-[320px] pb:space-y-4">
+      {/* Media thumbnail */}
+      <Skeleton className="pb:h-36 pb:w-full pb:rounded-xl" />
+      {/* Content lines */}
+      <div className="pb:space-y-2">
+        <Skeleton className="pb:h-4 pb:w-4/5 pb:rounded-md" />
+        <Skeleton className="pb:h-3 pb:w-full pb:rounded-md" />
+        <Skeleton className="pb:h-3 pb:w-2/3 pb:rounded-md" />
+      </div>
+      {/* Footer action button */}
+      <div className="pb:pt-2 pb:flex pb:justify-between pb:items-center">
+        <Skeleton className="pb:h-8 pb:w-24 pb:rounded-lg" />
+        <Skeleton className="pb:h-8 pb:w-8 pb:rounded-full" />
+      </div>
+    </div>
+  ),
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-8 pb:max-w-md">
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-700 pb:uppercase pb:tracking-wider pb:block pb:mb-3">
+          Avatar & Profile Header
+        </span>
+        <div className="pb:flex pb:items-center pb:gap-4">
+          <Skeleton className="pb:h-14 pb:w-14 pb:rounded-full" />
+          <div className="pb:space-y-2 pb:flex-1">
+            <Skeleton className="pb:h-4 pb:w-48 pb:rounded-md" />
+            <Skeleton className="pb:h-3 pb:w-32 pb:rounded-md" />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-700 pb:uppercase pb:tracking-wider pb:block pb:mb-3">
+          Paragraph Text Lines
+        </span>
+        <div className="pb:space-y-2.5">
+          <Skeleton className="pb:h-3.5 pb:w-full pb:rounded-md" />
+          <Skeleton className="pb:h-3.5 pb:w-11/12 pb:rounded-md" />
+          <Skeleton className="pb:h-3.5 pb:w-4/5 pb:rounded-md" />
+          <Skeleton className="pb:h-3.5 pb:w-3/5 pb:rounded-md" />
+        </div>
+      </div>
+
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-700 pb:uppercase pb:tracking-wider pb:block pb:mb-3">
+          Interactive Controls & Buttons
+        </span>
+        <div className="pb:flex pb:gap-3">
+          <Skeleton className="pb:h-10 pb:w-28 pb:rounded-xl" />
+          <Skeleton className="pb:h-10 pb:w-28 pb:rounded-xl" />
+          <Skeleton className="pb:h-10 pb:w-10 pb:rounded-xl" />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/{Skeleton.tsx → feedback/Skeleton.tsx}

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

package/src/ui/feedback/Spinner.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Spinner } from "./Spinner";
+
+const meta: Meta<typeof Spinner> = {
+  title: "Feedback/Spinner",
+  component: Spinner,
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg"],
+    },
+    color: {
+      control: "select",
+      options: ["primary", "teal", "pink", "neutral", "white"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {
+  args: {
+    size: "md",
+    color: "teal",
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="pb:flex pb:items-center pb:gap-6">
+      <div className="pb:flex pb:flex-col pb:items-center pb:gap-2">
+        <Spinner size="xs" color="teal" />
+        <span className="pb:text-xs pb:text-gray-500">xs</span>
+      </div>
+      <div className="pb:flex pb:flex-col pb:items-center pb:gap-2">
+        <Spinner size="sm" color="teal" />
+        <span className="pb:text-xs pb:text-gray-500">sm</span>
+      </div>
+      <div className="pb:flex pb:flex-col pb:items-center pb:gap-2">
+        <Spinner size="md" color="teal" />
+        <span className="pb:text-xs pb:text-gray-500">md</span>
+      </div>
+      <div className="pb:flex pb:flex-col pb:items-center pb:gap-2">
+        <Spinner size="lg" color="teal" />
+        <span className="pb:text-xs pb:text-gray-500">lg</span>
+      </div>
+    </div>
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
+    <div className="pb:flex pb:items-center pb:gap-6 pb:p-4 pb:bg-gray-50 pb:rounded-xl">
+      <div className="pb:flex pb:flex-col pb:items-center pb:gap-2">
+        <Spinner size="md" color="primary" />
+        <span className="pb:text-xs pb:text-gray-500">primary</span>
+      </div>
+      <div className="pb:flex pb:flex-col pb:items-center pb:gap-2">
+        <Spinner size="md" color="teal" />
+        <span className="pb:text-xs pb:text-gray-500">teal</span>
+      </div>
+      <div className="pb:flex pb:flex-col pb:items-center pb:gap-2">
+        <Spinner size="md" color="pink" />
+        <span className="pb:text-xs pb:text-gray-500">pink</span>
+      </div>
+      <div className="pb:flex pb:flex-col pb:items-center pb:gap-2">
+        <Spinner size="md" color="neutral" />
+        <span className="pb:text-xs pb:text-gray-500">neutral</span>
+      </div>
+      <div className="pb:flex pb:flex-col pb:items-center pb:gap-2 pb:bg-gray-800 pb:p-2 pb:rounded-lg">
+        <Spinner size="md" color="white" />
+        <span className="pb:text-xs pb:text-white">white</span>
+      </div>
+    </div>
+  ),
+};

package/src/ui/feedback/Spinner.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { cn } from "../utils";
+import { BrandColor, ComponentSize } from "../types";
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Size variant of the spinner */
+  size?: ComponentSize;
+  /** Color theme of the spinner */
+  color?: BrandColor | "primary" | "neutral";
+  /** Screen-reader accessible label */
+  label?: string;
+}
+
+const sizeClasses: Record<ComponentSize, string> = {
+  xs: "pb:w-3.5 pb:h-3.5 pb:border-[1.5px]",
+  sm: "pb:w-5 pb:h-5 pb:border-2",
+  md: "pb:w-8 pb:h-8 pb:border-[2.5px]",
+  lg: "pb:w-12 pb:h-12 pb:border-4",
+  xl: "pb:w-16 pb:h-16 pb:border-4",
+};
+
+const colorClasses: Record<string, string> = {
+  primary: "pb:border-primary pb:border-t-transparent",
+  teal: "pb:border-peerbots-teal pb:border-t-transparent",
+  pink: "pb:border-peerbots-pink pb:border-t-transparent",
+  darkteal: "pb:border-peerbots-darkteal pb:border-t-transparent",
+  darkblue: "pb:border-peerbots-darkblue pb:border-t-transparent",
+  neutral: "pb:border-gray-500 pb:border-t-transparent",
+  white: "pb:border-white pb:border-t-transparent",
+};
+
+export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
+  (
+    {
+      size = "md",
+      color = "teal",
+      label = "Loading...",
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        role="status"
+        aria-label={label}
+        className={cn(
+          "pb:inline-block pb:rounded-full pb:animate-spin pb:shrink-0",
+          sizeClasses[size] || sizeClasses.md,
+          colorClasses[color] || colorClasses.teal,
+          className,
+        )}
+        {...props}
+      >
+        <span className="pb:sr-only">{label}</span>
+      </div>
+    );
+  },
+);
+
+Spinner.displayName = "Spinner";

package/src/ui/{Tooltip.stories.tsx → feedback/Tooltip.stories.tsx}

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

package/src/ui/{Tooltip.tsx → feedback/Tooltip.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 import { Tooltip as BaseTooltip } from "@base-ui/react";
-import { cn } from "./utils";
-import { Icon } from "./Icon";
+import { cn } from "../utils";
+import { Icon } from "../foundations/Icon";
 
 export interface TooltipProps {
   content: React.ReactNode;

package/src/ui/feedback/index.ts

@@ -0,0 +1,7 @@
+export * from "./Tooltip";
+export * from "./Dialog";
+export * from "./Popover";
+export * from "./Skeleton";
+export * from "./Alert";
+export * from "./EmptyState";
+export * from "./Spinner";

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

@@ -0,0 +1,181 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+import { Icon } from "../foundations/Icon";
+import { Heading, Text } from "../foundations/Typography";
+import React from "react";
+
+const meta: Meta<typeof Button> = {
+  title: "Forms/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["solid", "soft", "outline", "ghost", "link"],
+      description: "Visual fill style / treatment",
+    },
+    color: {
+      control: "select",
+      options: ["primary", "neutral", "teal", "pink", "darkblue", "danger", "success", "warning"],
+      description: "Color palette or semantic intent",
+    },
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+      description: "Button scale / padding",
+    },
+    radius: {
+      control: "select",
+      options: ["none", "sm", "md", "lg", "pill"],
+      description: "Border radius geometry",
+    },
+    disabled: { control: "boolean" },
+    isLoading: { control: "boolean" },
+    onClick: { action: "clicked" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    radius: "md",
+  },
+};
+
+export const Recipes: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-8 pb:max-w-3xl">
+      <div>
+        <Heading level={4} className="pb:text-sm pb:font-bold pb:text-gray-900 pb:mb-1">
+          Standard Form Actions Pair
+        </Heading>
+        <Text size="sm" color="muted" className="pb:mb-3">
+          Pair one high-emphasis primary action with one neutral secondary action.
+        </Text>
+        <div className="pb:flex pb:items-center pb:gap-3">
+          <Button color="primary">Save Changes</Button>
+          <Button color="neutral">Cancel</Button>
+        </div>
+      </div>
+
+      <div>
+        <Heading level={4} className="pb:text-sm pb:font-bold pb:text-gray-900 pb:mb-1">
+          Brand CTAs (Teal & Pink Pill)
+        </Heading>
+        <Text size="sm" color="muted" className="pb:mb-3">
+          Use explicit brand colors with pill radius for hero and marketing CTAs.
+        </Text>
+        <div className="pb:flex pb:items-center pb:gap-3">
+          <Button color="teal" radius="pill" size="lg" rightIcon={<Icon name="chevronRight" />}>
+            Get Started
+          </Button>
+          <Button color="pink" radius="pill" size="lg">
+            Join Competition
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <Heading level={4} className="pb:text-sm pb:font-bold pb:text-gray-900 pb:mb-1">
+          Destructive Action Styles
+        </Heading>
+        <Text size="sm" color="muted" className="pb:mb-3">
+          Solid for final confirmation dialogs; ghost for table row inline actions.
+        </Text>
+        <div className="pb:flex pb:items-center pb:gap-3">
+          <Button color="danger">Delete Robot</Button>
+          <Button color="danger" variant="outline">Delete Face</Button>
+          <Button color="danger" variant="ghost">Remove</Button>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const FillVariantsMatrix: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-6 pb:p-6 pb:bg-gray-50 pb:rounded-2xl pb:max-w-4xl">
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:block pb:mb-2">Solid</span>
+        <div className="pb:flex pb:flex-wrap pb:gap-3">
+          <Button variant="solid" color="primary">Primary</Button>
+          <Button variant="solid" color="neutral">Neutral</Button>
+          <Button variant="solid" color="teal">Teal</Button>
+          <Button variant="solid" color="pink">Pink</Button>
+          <Button variant="solid" color="darkblue">Dark Blue</Button>
+          <Button variant="solid" color="danger">Danger</Button>
+          <Button variant="solid" color="success">Success</Button>
+        </div>
+      </div>
+
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:block pb:mb-2">Soft / Subtle</span>
+        <div className="pb:flex pb:flex-wrap pb:gap-3">
+          <Button variant="soft" color="primary">Primary</Button>
+          <Button variant="soft" color="teal">Teal</Button>
+          <Button variant="soft" color="pink">Pink</Button>
+          <Button variant="soft" color="darkblue">Dark Blue</Button>
+          <Button variant="soft" color="danger">Danger</Button>
+          <Button variant="soft" color="success">Success</Button>
+        </div>
+      </div>
+
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:block pb:mb-2">Outline</span>
+        <div className="pb:flex pb:flex-wrap pb:gap-3">
+          <Button variant="outline" color="neutral">Neutral</Button>
+          <Button variant="outline" color="teal">Teal</Button>
+          <Button variant="outline" color="pink">Pink</Button>
+          <Button variant="outline" color="danger">Danger</Button>
+        </div>
+      </div>
+
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:block pb:mb-2">Ghost</span>
+        <div className="pb:flex pb:flex-wrap pb:gap-3">
+          <Button variant="ghost" color="neutral">Neutral</Button>
+          <Button variant="ghost" color="teal">Teal</Button>
+          <Button variant="ghost" color="pink">Pink</Button>
+          <Button variant="ghost" color="danger">Danger</Button>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const SizesAndShapes: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-6 pb:p-6 pb:bg-white pb:rounded-2xl pb:max-w-4xl">
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:block pb:mb-2">Sizes</span>
+        <div className="pb:flex pb:flex-wrap pb:items-end pb:gap-3">
+          <Button size="xs" color="teal">Extra Small</Button>
+          <Button size="sm" color="teal">Small</Button>
+          <Button size="md" color="teal">Medium (Default)</Button>
+          <Button size="lg" color="teal">Large</Button>
+          <Button size="xl" color="teal">Extra Large</Button>
+        </div>
+      </div>
+
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:uppercase pb:block pb:mb-2">Border Radii (Shapes)</span>
+        <div className="pb:flex pb:flex-wrap pb:items-center pb:gap-3">
+          <Button radius="none" color="pink">None (0px)</Button>
+          <Button radius="sm" color="pink">Small</Button>
+          <Button radius="md" color="pink">Medium (Default)</Button>
+          <Button radius="lg" color="pink">Large</Button>
+          <Button radius="pill" color="pink">Pill (Full)</Button>
+        </div>
+      </div>
+    </div>
+  ),
+};