@peerbots/core 0.2.6 → 1.0.0

package/src/ui/forms/ChipGroup.tsx

@@ -0,0 +1,239 @@
+import React, { useState } from "react";
+import { cn } from "../utils";
+import { ComponentColor, ComponentRadius, ComponentSize, FillVariant } from "../types";
+
+export interface ChipOption<T = string> {
+  value: T;
+  label: React.ReactNode;
+  badge?: React.ReactNode;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+}
+
+export interface ChipGroupProps<T = string> {
+  /** Array of selectable chip options */
+  options: ChipOption<T>[];
+  /** Controlled single selected value */
+  value?: T;
+  /** Uncontrolled initial single selected value */
+  defaultValue?: T;
+  /** Callback fired when single selection changes */
+  onChange?: (value: T) => void;
+  /** Enable multiple selection mode */
+  multiple?: boolean;
+  /** Controlled array of selected values (for multi mode) */
+  values?: T[];
+  /** Uncontrolled initial array of selected values (for multi mode) */
+  defaultValues?: T[];
+  /** Callback fired when multiple selection changes */
+  onMultipleChange?: (values: T[]) => void;
+  /** Color theme */
+  color?: ComponentColor;
+  /** Visual fill style */
+  variant?: "solid" | "soft" | "outline";
+  /** Size scale */
+  size?: ComponentSize;
+  /** Border radius scale */
+  radius?: ComponentRadius;
+  /** Enable horizontal scrollable rail */
+  scrollable?: boolean;
+  className?: string;
+  id?: string;
+  name?: string;
+}
+
+const activeColorStyles: Record<string, Record<string, string>> = {
+  solid: {
+    primary:
+      "pb:bg-primary pb:text-gray-900 pb:border-primary pb:shadow-sm pb:font-bold",
+    teal: "pb:bg-peerbots-teal pb:text-gray-900 pb:border-peerbots-teal pb:shadow-sm pb:font-bold",
+    pink: "pb:bg-rose-700 pb:text-white pb:border-rose-700 pb:shadow-sm pb:font-bold",
+    darkblue:
+      "pb:bg-peerbots-darkblue pb:text-white pb:border-peerbots-darkblue pb:shadow-sm pb:font-bold",
+    neutral:
+      "pb:bg-gray-800 pb:text-white pb:border-gray-800 pb:shadow-sm pb:font-bold",
+    danger: "pb:bg-red-600 pb:text-white pb:border-red-600 pb:shadow-sm pb:font-bold",
+  },
+  soft: {
+    primary:
+      "pb:bg-primary/20 pb:text-teal-950 pb:border-primary/40 pb:font-bold",
+    teal: "pb:bg-peerbots-teal/20 pb:text-teal-950 pb:border-peerbots-teal/40 pb:font-bold",
+    pink: "pb:bg-peerbots-pink/20 pb:text-rose-950 pb:border-peerbots-pink/40 pb:font-bold",
+    darkblue:
+      "pb:bg-peerbots-darkblue/20 pb:text-peerbots-darkblue pb:border-peerbots-darkblue/40 pb:font-bold",
+    neutral:
+      "pb:bg-gray-200 pb:text-gray-900 pb:border-gray-300 pb:font-bold",
+    danger: "pb:bg-red-100 pb:text-red-900 pb:border-red-300 pb:font-bold",
+  },
+  outline: {
+    primary:
+      "pb:bg-primary/10 pb:text-teal-950 pb:border-teal-700 pb:font-bold pb:border-2",
+    teal: "pb:bg-peerbots-teal/10 pb:text-peerbots-darkteal pb:border-peerbots-darkteal pb:font-bold pb:border-2",
+    pink: "pb:bg-peerbots-pink/10 pb:text-rose-800 pb:border-rose-700 pb:font-bold pb:border-2",
+    darkblue:
+      "pb:bg-peerbots-darkblue/10 pb:text-peerbots-darkblue pb:border-peerbots-darkblue pb:font-bold pb:border-2",
+    neutral:
+      "pb:bg-gray-100 pb:text-gray-900 pb:border-gray-400 pb:font-bold pb:border-2",
+    danger: "pb:bg-red-50 pb:text-red-900 pb:border-red-500 pb:font-bold pb:border-2",
+  },
+};
+
+const inactiveStyles =
+  "pb:bg-white pb:text-gray-700 pb:border-gray-300 pb:hover:border-gray-400 pb:hover:bg-gray-50 pb:hover:text-gray-950";
+
+const radiusClasses: Record<ComponentRadius, string> = {
+  none: "pb:rounded-none",
+  sm: "pb:rounded-md",
+  md: "pb:rounded-xl",
+  lg: "pb:rounded-2xl",
+  "2xl": "pb:rounded-2xl",
+  pill: "pb:rounded-full",
+};
+
+const sizeClasses: Record<ComponentSize, { chip: string; text: string; badge: string }> = {
+  xs: {
+    chip: "pb:px-2 pb:py-0.5 pb:gap-1",
+    text: "pb:text-[10px]",
+    badge: "pb:text-[8px] pb:px-1 pb:py-0.5",
+  },
+  sm: {
+    chip: "pb:px-3 pb:py-1 pb:gap-1.5",
+    text: "pb:text-xs",
+    badge: "pb:text-[9px] pb:px-1.5 pb:py-0.5",
+  },
+  md: {
+    chip: "pb:px-3.5 pb:py-1.5 pb:gap-2",
+    text: "pb:text-sm",
+    badge: "pb:text-[10px] pb:px-1.5 pb:py-0.5",
+  },
+  lg: {
+    chip: "pb:px-4.5 pb:py-2 pb:gap-2.5",
+    text: "pb:text-base",
+    badge: "pb:text-xs pb:px-2 pb:py-0.5",
+  },
+  xl: {
+    chip: "pb:px-6 pb:py-2.5 pb:gap-3",
+    text: "pb:text-lg",
+    badge: "pb:text-xs pb:px-2.5 pb:py-1",
+  },
+};
+
+export function ChipGroup<T = string>({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  multiple = false,
+  values: controlledValues,
+  defaultValues,
+  onMultipleChange,
+  color = "teal",
+  variant = "soft",
+  size = "md",
+  radius = "pill",
+  scrollable = false,
+  className,
+  id,
+  name,
+}: ChipGroupProps<T>) {
+  const [internalValue, setInternalValue] = useState<T | undefined>(
+    defaultValue !== undefined ? defaultValue : options[0]?.value,
+  );
+  const [internalValues, setInternalValues] = useState<T[]>(
+    defaultValues || [],
+  );
+
+  const activeValue = controlledValue !== undefined ? controlledValue : internalValue;
+  const activeValues = controlledValues !== undefined ? controlledValues : internalValues;
+
+  const handleSelect = (optionValue: T, disabled?: boolean) => {
+    if (disabled) return;
+
+    if (multiple) {
+      const exists = activeValues.includes(optionValue);
+      const nextValues = exists
+        ? activeValues.filter((v) => v !== optionValue)
+        : [...activeValues, optionValue];
+
+      if (controlledValues === undefined) {
+        setInternalValues(nextValues);
+      }
+      onMultipleChange?.(nextValues);
+    } else {
+      if (controlledValue === undefined) {
+        setInternalValue(optionValue);
+      }
+      onChange?.(optionValue);
+    }
+  };
+
+  const activeStyle =
+    activeColorStyles[variant]?.[color] ||
+    activeColorStyles[variant]?.teal ||
+    activeColorStyles.soft.teal;
+
+  const currentSize = sizeClasses[size] || sizeClasses.md;
+
+  return (
+    <div
+      id={id}
+      role={multiple ? "group" : "radiogroup"}
+      aria-label={name}
+      className={cn(
+        "pb:flex pb:items-center pb:gap-2 pb:box-border",
+        scrollable
+          ? "pb:overflow-x-auto pb:no-scrollbar pb:py-1 pb:px-0.5"
+          : "pb:flex-wrap",
+        className,
+      )}
+    >
+      {options.map((option, idx) => {
+        const isSelected = multiple
+          ? activeValues.includes(option.value)
+          : activeValue === option.value;
+
+        return (
+          <button
+            key={idx}
+            type="button"
+            role={multiple ? "checkbox" : "radio"}
+            aria-checked={isSelected}
+            disabled={option.disabled}
+            onClick={() => handleSelect(option.value, option.disabled)}
+            className={cn(
+              "pb:inline-flex pb:items-center pb:border pb:font-medium pb:transition-all pb:duration-150 pb:cursor-pointer pb:select-none pb:shrink-0 pb:focus:outline-none pb:focus-visible:ring-2 pb:focus-visible:ring-peerbots-teal pb:focus-visible:ring-offset-1",
+              radiusClasses[radius] || radiusClasses.pill,
+              currentSize.chip,
+              currentSize.text,
+              isSelected ? activeStyle : inactiveStyles,
+              option.disabled &&
+                "pb:opacity-40 pb:cursor-not-allowed pb:bg-gray-100 pb:text-gray-400 pb:border-gray-200",
+            )}
+          >
+            {option.icon && (
+              <span className="pb:shrink-0 pb:flex pb:items-center">
+                {option.icon}
+              </span>
+            )}
+
+            <span>{option.label}</span>
+
+            {option.badge && (
+              <span
+                className={cn(
+                  "pb:rounded-full pb:font-bold pb:leading-none pb:tracking-tight",
+                  currentSize.badge,
+                  isSelected
+                    ? "pb:bg-black/15 pb:text-current"
+                    : "pb:bg-gray-200 pb:text-gray-800",
+                )}
+              >
+                {option.badge}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Menu as BaseMenu } from "@base-ui/react";
-import { cn } from "./utils";
+import { cn } from "../utils";
 
 export interface DropdownProps {
   trigger: React.ReactNode;

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Field } from "./Field";
-import { Icon } from "./Icon";
-import { Heading } from "./Typography";
+import { Icon } from "../foundations/Icon";
+import { Heading } from "../foundations/Typography";
 import { Input } from "./Input";
 import { Slider } from "./Slider";
 import { Select } from "./Select";
@@ -11,7 +11,7 @@ import { SliderWithNumberField } from "./SliderWithNumberField";
 import { Checkbox } from "./Checkbox";
 
 const meta: Meta<typeof Field> = {
-  title: "UI/Field",
+  title: "Forms/Field",
   component: Field,
   tags: ["autodocs"],
   argTypes: {

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

@@ -1,6 +1,6 @@
 import { Field as BaseField } from "@base-ui/react";
 import React from "react";
-import { cn } from "./utils";
+import { cn } from "../utils";
 import { Label } from "./Label";
 
 export interface FieldProps extends BaseField.Root.Props {

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

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Input } from "./Input";
-import { Heading, Text } from "./Typography";
+import { Heading, Text } from "../foundations/Typography";
 
 const meta: Meta<typeof Input> = {
-  title: "UI/Input",
+  title: "Forms/Input",
   component: Input,
   tags: ["autodocs"],
   argTypes: {
@@ -32,19 +32,19 @@ export const Variations: Story = {
             <Text variant="small" className="pb:font-bold">
               With Placeholder
             </Text>
-            <Input placeholder="Type here..." />
+            <Input aria-label="With placeholder" placeholder="Type here..." />
           </div>
           <div className="pb:space-y-1">
             <Text variant="small" className="pb:font-bold">
               With Value
             </Text>
-            <Input defaultValue="Initial value" />
+            <Input aria-label="With value" defaultValue="Initial value" />
           </div>
           <div className="pb:space-y-1">
             <Text variant="small" className="pb:font-bold">
               Password Type
             </Text>
-            <Input type="password" placeholder="Password..." />
+            <Input aria-label="Password" type="password" placeholder="Password..." />
           </div>
         </div>
       </div>
@@ -58,7 +58,7 @@ export const Variations: Story = {
             <Text variant="small" className="pb:font-bold">
               Disabled
             </Text>
-            <Input disabled defaultValue="Can't edit me" />
+            <Input aria-label="Disabled input" disabled defaultValue="Can't edit me" />
           </div>
         </div>
       </div>

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

@@ -1,6 +1,6 @@
 import { Input as BaseInput } from "@base-ui/react";
 import React from "react";
-import { cn } from "./utils";
+import { cn } from "../utils";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   leftIcon?: React.ReactNode;

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

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

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { cn } from "./utils";
-import { HelperTooltip } from "./Tooltip";
+import { cn } from "../utils";
+import { HelperTooltip } from "../feedback/Tooltip";
 
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   children: React.ReactNode;

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

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

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { NumberField as BaseNumberField } from "@base-ui/react";
-import { cn } from "./utils";
-import { Icon } from "./Icon";
+import { cn } from "../utils";
+import { Icon } from "../foundations/Icon";
 
-export interface NumberFieldProps {
+export interface NumberFieldProps extends React.AriaAttributes {
   value?: number | null;
   defaultValue?: number;
   min?: number;
@@ -33,17 +33,16 @@ export const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(
       id: propsId,
       placeholder,
       showButtons = false,
+      "aria-label": ariaLabel,
       ...props
     },
     ref,
   ) => {
-    const generatedId = React.useId();
-    const numberId = propsId || generatedId;
-
     return (
       <div className="pb:w-full">
         <BaseNumberField.Root
           ref={ref}
+          id={propsId}
           value={value}
           defaultValue={defaultValue}
           min={min}
@@ -60,7 +59,7 @@ export const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(
           className={cn("pb:flex pb:flex-col pb:gap-1", className)}
           {...props}
         >
-          <div
+          <BaseNumberField.Group
             className={cn(
               "pb:group pb:relative pb:flex pb:items-center pb:rounded-md pb:border-0 pb:bg-primary/10 pb:ring-1 pb:ring-inset pb:ring-gray-300 pb:focus-within:ring-2 pb:focus-within:ring-primary pb:shadow-sm",
               disabled && "pb:opacity-50 pb:cursor-not-allowed",
@@ -82,8 +81,8 @@ export const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(
             )}
 
             <BaseNumberField.Input
-              id={numberId}
               placeholder={placeholder}
+              aria-label={ariaLabel || (typeof placeholder === "string" ? placeholder : "Number input")}
               className={cn(
                 "pb:block pb:w-full pb:bg-transparent pb:border-0 pb:px-3 pb:py-1.5 pb:text-gray-900 pb:placeholder:text-gray-400 pb:focus:ring-0 pb:sm:text-sm pb:sm:leading-6 pb:text-center pb:appearance-none pb:relative pb:z-0",
                 !showButtons && "pb:rounded-md",
@@ -106,7 +105,7 @@ export const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(
             )}
 
             <BaseNumberField.ScrubArea className="pb:absolute pb:inset-0 pb:z-10 pb:cursor-ew-resize pb:opacity-0 pb:hover:opacity-10 pb:transition-opacity pb:bg-primary/5 pb:rounded-md pb:pointer-events-none group-pb:hover:pointer-events-auto" />
-          </div>
+          </BaseNumberField.Group>
         </BaseNumberField.Root>
       </div>
     );

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { PeerbotsColorSelector, PeerbotsColor } from "./PeerbotsColorSelector";
+
+const meta: Meta<typeof PeerbotsColorSelector> = {
+  title: "Forms/PeerbotsColorSelector",
+  component: PeerbotsColorSelector,
+};
+
+export default meta;
+type Story = StoryObj<typeof PeerbotsColorSelector>;
+
+function InteractiveSelector(props: Partial<React.ComponentProps<typeof PeerbotsColorSelector>>) {
+  const [selected, setSelected] = useState<PeerbotsColor>("Light Blue");
+  return (
+    <PeerbotsColorSelector
+      selectedColor={selected}
+      onColorSelect={setSelected}
+      {...props}
+    />
+  );
+}
+
+export const Default: Story = {
+  render: () => <InteractiveSelector />,
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-6 pb:p-4">
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:block pb:mb-2">Small Size</span>
+        <InteractiveSelector size="sm" />
+      </div>
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:block pb:mb-2">Medium Size (Default)</span>
+        <InteractiveSelector size="md" />
+      </div>
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:block pb:mb-2">Large Size</span>
+        <InteractiveSelector size="lg" />
+      </div>
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-500 pb:block pb:mb-2">Subset of Colors</span>
+        <InteractiveSelector colors={["Light Blue", "Blue", "Green", "Red", "Purple"]} />
+      </div>
+    </div>
+  ),
+};

package/src/ui/forms/PeerbotsColorSelector.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { cn } from "../utils";
+
+export type PeerbotsColor =
+  | "Light Blue"
+  | "Blue"
+  | "Green"
+  | "Red"
+  | "Purple"
+  | "Pink"
+  | "Yellow"
+  | "Orange"
+  | "Grey"
+  | "Black"
+  | "White";
+
+export const PEERBOTS_COLOR_MAP: Record<PeerbotsColor, string> = {
+  "Light Blue": "#ABE3FA",
+  Blue: "#5F94D6",
+  Green: "#65C77D",
+  Red: "#E6817E",
+  Purple: "#9B86F3",
+  Pink: "#EBA4E4",
+  Yellow: "#F8EDB1",
+  Orange: "#E6A575",
+  Grey: "#CECECE",
+  Black: "#4D4D4D",
+  White: "#FDFEFE",
+};
+
+export const PEERBOTS_FONT_COLOR_MAP: Record<PeerbotsColor, string> = {
+  "Light Blue": "#020307",
+  Blue: "#020307",
+  Green: "#020307",
+  Red: "#020307",
+  Purple: "#020307",
+  Pink: "#020307",
+  Yellow: "#020307",
+  Orange: "#020307",
+  Grey: "#020307",
+  Black: "#FDFEFE",
+  White: "#020307",
+};
+
+export interface PeerbotsColorSelectorProps {
+  selectedColor?: PeerbotsColor | string;
+  onColorSelect: (color: PeerbotsColor) => void;
+  colors?: PeerbotsColor[];
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  ariaLabelPrefix?: string;
+}
+
+export function PeerbotsColorSelector({
+  selectedColor,
+  onColorSelect,
+  colors = Object.keys(PEERBOTS_COLOR_MAP) as PeerbotsColor[],
+  size = "md",
+  className,
+  ariaLabelPrefix = "Select color",
+}: PeerbotsColorSelectorProps) {
+  const sizeClasses = {
+    sm: "pb:h-6 pb:w-6",
+    md: "pb:h-8 pb:w-8",
+    lg: "pb:h-10 pb:w-10",
+  };
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label="Color selector"
+      className={cn(
+        "pb:inline-flex pb:flex-wrap pb:gap-1 pb:items-center",
+        className,
+      )}
+    >
+      {colors.map((colorName) => {
+        const isSelected = selectedColor === colorName;
+        return (
+          <button
+            key={colorName}
+            type="button"
+            role="radio"
+            aria-checked={isSelected}
+            aria-label={`${ariaLabelPrefix} ${colorName}`}
+            className={cn(
+              "pb:rounded-full pb:cursor-pointer pb:border pb:transition-all pb:duration-150 pb:focus-visible:ring-2 pb:focus-visible:ring-gray-400 pb:focus-visible:outline-none",
+              sizeClasses[size],
+              isSelected
+                ? "pb:border-2 pb:border-black pb:scale-110 pb:shadow-sm"
+                : "pb:border-gray-300 pb:hover:border-gray-500 pb:hover:scale-105",
+            )}
+            style={{ background: PEERBOTS_COLOR_MAP[colorName] || colorName }}
+            onClick={() => onColorSelect(colorName)}
+          />
+        );
+      })}
+    </div>
+  );
+}

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

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

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

@@ -1,14 +1,14 @@
 import React from "react";
 import { Select as BaseSelect } from "@base-ui/react";
-import { cn } from "./utils";
-import { Icon } from "./Icon";
+import { cn } from "../utils";
+import { Icon } from "../foundations/Icon";
 
 export interface SelectOption {
   label: string;
   value: string | number;
 }
 
-export interface SelectProps {
+export interface SelectProps extends React.AriaAttributes {
   options: (string | SelectOption)[];
   value?: string | number;
   defaultValue?: string | number;
@@ -32,6 +32,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
       disabled,
       placeholder = "Select...",
       onFocus,
+      "aria-label": ariaLabel,
       ...props
     },
     ref,
@@ -61,6 +62,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
           <BaseSelect.Trigger
             ref={ref}
             id={selectId}
+            aria-label={ariaLabel || (typeof placeholder === "string" ? placeholder : "Select an option")}
             className={cn(
               "pb:flex pb:w-full pb:items-center pb:justify-between pb:rounded-md pb:border-0 pb:py-1.5 pb:pl-3 pb:pr-3 pb:text-gray-900 pb:ring-1 pb:ring-inset pb:ring-gray-300 pb:focus:ring-2 pb:focus:ring-primary pb:sm:text-sm pb:sm:leading-6 pb:bg-primary/10 pb:min-h-[36px]",
               disabled && "pb:opacity-50 pb:cursor-not-allowed",

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

@@ -2,10 +2,10 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { Slider } from "./Slider";
 import { Input } from "./Input";
-import { Heading, Text } from "./Typography";
+import { Heading, Text } from "../foundations/Typography";
 
 const meta: Meta<typeof Slider> = {
-  title: "UI/Slider",
+  title: "Forms/Slider",
   component: Slider,
   argTypes: {
     onChange: { action: "changed" },
@@ -62,11 +62,12 @@ const RangeChangeableSlider = ({
         <div className="pb:flex pb:flex-col pb:gap-1">
           <Text
             variant="small"
-            className="pb:uppercase pb:text-slate-400 pb:font-bold pb:text-[10px]"
+            className="pb:uppercase pb:text-slate-700 pb:font-bold pb:text-[10px]"
           >
             Min
           </Text>
           <Input
+            aria-label="Minimum value"
             type="number"
             value={min}
             onChange={(e) => setMin(Number(e.target.value))}
@@ -76,11 +77,12 @@ const RangeChangeableSlider = ({
         <div className="pb:flex pb:flex-col pb:gap-1">
           <Text
             variant="small"
-            className="pb:uppercase pb:text-slate-400 pb:font-bold pb:text-[10px]"
+            className="pb:uppercase pb:text-slate-700 pb:font-bold pb:text-[10px]"
           >
             Max
           </Text>
           <Input
+            aria-label="Maximum value"
             type="number"
             value={max}
             onChange={(e) => setMax(Number(e.target.value))}