@peerbots/core 0.1.3 → 0.2.0

package/src/ui/Dialog.stories.tsx

@@ -16,11 +16,11 @@ 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">
+      <DialogTitle className="pb:text-xl pb:font-bold pb:mb-2">Dialog Title</DialogTitle>
+      <DialogDescription className="pb:text-black pb:mb-6">
         This is a description of the dialog content.
       </DialogDescription>
-      <div className="flex justify-end gap-2">
+      <div className="pb:flex pb:justify-end pb:gap-2">
         <DialogClose render={<Button variant="secondary">Cancel</Button>} />
         <DialogClose render={<Button variant="primary">Confirm</Button>} />
       </div>

package/src/ui/Dialog.tsx

@@ -31,10 +31,10 @@ export function Dialog({
           <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.Backdrop className="pb:fixed pb:inset-0 pb:z-50 pb:bg-black/40 pb:transition-all pb:duration-200 data-[state=open]:pb:animate-in data-[state=closed]:pb:animate-out pb:data-[state=closed]:fade-out-0 pb: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",
+            "pb:fixed pb:left-[50%] pb:top-[50%] pb:z-50 pb:grid pb:w-auto pb:max-w-[90vw] pb:translate-x-[-50%] pb:translate-y-[-50%] pb:gap-4 pb:border pb:bg-white pb:p-6 pb:shadow-lg pb:duration-200 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 data-[state=closed]:pb:slide-out-to-left-1/2 data-[state=closed]:pb:slide-out-to-top-[48%] data-[state=open]:pb:slide-in-from-left-1/2 data-[state=open]:pb:slide-in-from-top-[48%] sm:rounded-lg",
             className,
           )}
         >

package/src/ui/Dropdown.tsx

@@ -26,7 +26,7 @@ export function Dropdown({
         <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",
+              "pb:z-50 pb:min-w-[8rem] pb:overflow-hidden pb:rounded-md pb:border pb:bg-white pb:p-1 pb:shadow-md pb:data-[state=open]:animate-in pb:data-[state=closed]:animate-out pb:data-[state=closed]:fade-out-0 pb:data-[state=open]:fade-in-0 pb:data-[state=closed]:zoom-out-95 pb:data-[state=open]:zoom-in-95",
               className,
             )}
           >
@@ -45,7 +45,7 @@ export const DropdownItem = React.forwardRef<
   <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",
+      "pb:relative pb:flex pb:cursor-default pb:select-none pb:items-center pb:rounded-sm pb:px-2 pb:py-1.5 pb:text-sm pb:outline-none pb:transition-colors pb:data-[highlighted]:bg-gray-100 pb:data-[highlighted]:text-gray-900",
       className,
     )}
     {...props}
@@ -59,7 +59,7 @@ export const DropdownSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseMenu.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-gray-100", className)}
+    className={cn("pb:-mx-1 pb:my-1 pb:h-px pb:bg-gray-100", className)}
     {...props}
   />
 ));

package/src/ui/Field.stories.tsx

@@ -36,15 +36,15 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-12 p-4 max-w-2xl">
-      <div className="space-y-4">
+    <div className="pb:flex pb:flex-col pb:gap-12 pb:p-4 pb:max-w-2xl">
+      <div className="pb:space-y-4">
         <Heading
           level={4}
-          className="text-sm font-medium text-black uppercase tracking-wider"
+          className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider"
         >
           Basic Inputs
         </Heading>
-        <div className="grid gap-6">
+        <div className="pb:grid pb:gap-6">
           <Field
             label="Text Input"
             description="Standard text field"
@@ -61,14 +61,14 @@ export const Variations: Story = {
         </div>
       </div>
 
-      <div className="space-y-4">
+      <div className="pb:space-y-4">
         <Heading
           level={4}
-          className="text-sm font-medium text-black uppercase tracking-wider"
+          className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider"
         >
           Selection & Toggles
         </Heading>
-        <div className="grid gap-6">
+        <div className="pb:grid pb:gap-6">
           <Field label="Select Language">
             <Select
               options={[
@@ -81,7 +81,7 @@ export const Variations: Story = {
           </Field>
           <Field
             label="Enable Notifications"
-            className="flex-row items-center justify-between"
+            className="pb:flex-row pb:items-center pb:justify-between"
           >
             <Switch />
           </Field>
@@ -95,14 +95,14 @@ export const Variations: Story = {
         </div>
       </div>
 
-      <div className="space-y-4">
+      <div className="pb:space-y-4">
         <Heading
           level={4}
-          className="text-sm font-medium text-black uppercase tracking-wider"
+          className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider"
         >
           Sliders
         </Heading>
-        <div className="grid gap-6">
+        <div className="pb:grid pb:gap-6">
           <Field label="Simple Slider" tooltip="Adjust volume">
             <Slider defaultValue={50} />
           </Field>
@@ -117,14 +117,14 @@ export const Variations: Story = {
         </div>
       </div>
 
-      <div className="space-y-4">
+      <div className="pb:space-y-4">
         <Heading
           level={4}
-          className="text-sm font-medium text-black uppercase tracking-wider"
+          className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider"
         >
           Layout Variations
         </Heading>
-        <div className="grid gap-6">
+        <div className="pb:grid pb:gap-6">
           <Field
             label="Label on Left"
             labelPlacement="left"
@@ -145,18 +145,18 @@ export const Variations: Story = {
         </div>
       </div>
 
-      <div className="space-y-4">
+      <div className="pb:space-y-4">
         <Heading
           level={4}
-          className="text-sm font-medium text-black uppercase tracking-wider"
+          className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider"
         >
           Field Groups
         </Heading>
-        <div className="border rounded-lg p-6 bg-gray-50/50">
-          <Heading level={5} className="font-bold mb-4">
+        <div className="pb:border pb:rounded-lg pb:p-6 pb:bg-gray-50/50">
+          <Heading level={5} className="pb:font-bold pb:mb-4">
             Settings Group
           </Heading>
-          <div className="flex flex-col gap-4">
+          <div className="pb:flex pb:flex-col pb:gap-4">
             <Field
               label="Break up long sentences"
               labelPlacement="right"

package/src/ui/Field.tsx

@@ -42,19 +42,19 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
       <BaseField.Root
         ref={ref}
         className={cn(
-          "flex w-full",
-          isHorizontal ? "flex-col gap-1" : "flex-col gap-1.5",
+          "pb:flex pb:w-full",
+          isHorizontal ? "pb:flex-col pb:gap-1" : "pb:flex-col pb:gap-1.5",
           className as string,
         )}
         {...props}
       >
         <div
           className={cn(
-            "flex",
-            isHorizontal ? "flex-row items-center gap-2" : "flex-col gap-1.5",
+            "pb:flex",
+            isHorizontal ? "pb:flex-row pb:items-center pb:gap-2" : "pb:flex-col pb:gap-1.5",
           )}
         >
-          {labelOnRight && <div className="relative">{children}</div>}
+          {labelOnRight && <div className="pb:relative">{children}</div>}
 
           {label && (
             <BaseField.Label
@@ -62,13 +62,13 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
                 <Label
                   tooltip={tooltip}
                   className={cn(
-                    "mb-0",
-                    labelWeight === "normal" && "font-normal",
+                    "pb:mb-0",
+                    labelWeight === "normal" && "pb:font-normal",
                   )}
                   {...props}
                 >
-                  <span className="flex items-center gap-1">
-                    {icon && <span className="flex-shrink-0">{icon}</span>}
+                  <span className="pb:flex pb:items-center pb:gap-1">
+                    {icon && <span className="pb:flex-shrink-0">{icon}</span>}
                     {label}
                   </span>
                 </Label>
@@ -76,14 +76,14 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
             />
           )}
 
-          {!labelOnRight && <div className="relative">{children}</div>}
+          {!labelOnRight && <div className="pb: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
+              "pb:text-xs pb:text-gray-500",
+              labelOnRight && "pb:ml-7", // Aligns description with label text when child is on left
             )}
           >
             {description}
@@ -93,8 +93,8 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
         {error && (
           <BaseField.Error
             className={cn(
-              "text-xs text-red-600 font-medium",
-              labelOnRight && "ml-7",
+              "pb:text-xs pb:text-red-600 pb:font-medium",
+              labelOnRight && "pb:ml-7",
             )}
           >
             {error}

package/src/ui/Icon.stories.tsx

@@ -88,7 +88,7 @@ export const Default: Story = {
 
 export const NamedIcons: Story = {
   render: () => (
-    <div className="grid grid-cols-6 gap-4 p-4">
+    <div className="pb:grid pb:grid-cols-6 pb:gap-4 pb:p-4">
       {[
         "arrowDown",
         "arrowDownToLine",
@@ -145,7 +145,7 @@ export const NamedIcons: Story = {
         "xCircle",
         "zap",
       ].map((name) => (
-        <div key={name} className="flex flex-col items-center">
+        <div key={name} className="pb:flex pb:flex-col pb:items-center">
           <Icon name={name as IconName} />
           <Text variant="small">{name}</Text>
         </div>
@@ -156,35 +156,35 @@ export const NamedIcons: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-12 p-4">
-      <div className="space-y-4">
-        <Text variant="small" className="font-bold underline uppercase">
+    <div className="pb:flex pb:flex-col pb:gap-12 pb:p-4">
+      <div className="pb:space-y-4">
+        <Text variant="small" className="pb:font-bold pb:underline pb:uppercase">
           Different Sizes
         </Text>
-        <div className="flex items-end gap-4">
+        <div className="pb:flex pb:items-end pb:gap-4">
           <Icon size="sm">{CheckPath}</Icon>
           <Icon size="md">{CheckPath}</Icon>
           <Icon size="lg">{CheckPath}</Icon>
           <Icon size="xl">{CheckPath}</Icon>
         </div>
       </div>
-      <div className="space-y-4">
-        <Text variant="small" className="font-bold underline uppercase">
+      <div className="pb:space-y-4">
+        <Text variant="small" className="pb:font-bold pb:underline pb:uppercase">
           Different Content & Colors
         </Text>
-        <div className="flex gap-4">
-          <Icon className="text-red-500">{XPath}</Icon>
-          <Icon className="text-primary">{CheckPath}</Icon>
+        <div className="pb:flex pb:gap-4">
+          <Icon className="pb:text-red-500">{XPath}</Icon>
+          <Icon className="pb:text-primary">{CheckPath}</Icon>
         </div>
       </div>
-      <div className="space-y-4">
-        <Text variant="small" className="font-bold underline uppercase">
+      <div className="pb:space-y-4">
+        <Text variant="small" className="pb:font-bold pb:underline pb:uppercase">
           Using Named Icons
         </Text>
-        <div className="flex gap-4">
-          <Icon name="check" className="text-green-500" />
-          <Icon name="x" className="text-red-500" />
-          <Icon name="plus" className="text-blue-500" />
+        <div className="pb:flex pb:gap-4">
+          <Icon name="check" className="pb:text-green-500" />
+          <Icon name="x" className="pb:text-red-500" />
+          <Icon name="plus" className="pb:text-blue-500" />
         </div>
       </div>
     </div>

package/src/ui/Icon.tsx

@@ -12,10 +12,10 @@ export interface IconProps extends React.SVGProps<SVGSVGElement> {
 export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
   ({ className, size = "md", name, children, ...props }, ref) => {
     const sizes = {
-      sm: "w-3 h-3",
-      md: "w-4 h-4",
-      lg: "w-6 h-6",
-      xl: "w-8 h-8",
+      sm: "pb:w-3 pb:h-3",
+      md: "pb:w-4 pb:h-4",
+      lg: "pb:w-6 pb:h-6",
+      xl: "pb:w-8 pb:h-8",
     };
 
     const iconContent = name ? icons[name] : children;
@@ -30,7 +30,7 @@ export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={cn(sizes[size], "inline-block", className)}
+        className={cn(sizes[size], "pb:inline-block", className)}
         {...props}
       >
         {iconContent}

package/src/ui/Input.stories.tsx

@@ -22,26 +22,26 @@ export const Default: Story = {
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-8 p-4 max-w-sm">
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black uppercase">
+    <div className="pb:flex pb:flex-col pb:gap-8 pb:p-4 pb:max-w-sm">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Input Styles
         </Heading>
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <Text variant="small" className="font-bold">
+        <div className="pb:space-y-4">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:font-bold">
               With Placeholder
             </Text>
             <Input placeholder="Type here..." />
           </div>
-          <div className="space-y-1">
-            <Text variant="small" className="font-bold">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:font-bold">
               With Value
             </Text>
             <Input defaultValue="Initial value" />
           </div>
-          <div className="space-y-1">
-            <Text variant="small" className="font-bold">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:font-bold">
               Password Type
             </Text>
             <Input type="password" placeholder="Password..." />
@@ -49,13 +49,13 @@ export const Variations: Story = {
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black uppercase">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           States
         </Heading>
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <Text variant="small" className="font-bold">
+        <div className="pb:space-y-4">
+          <div className="pb:space-y-1">
+            <Text variant="small" className="pb:font-bold">
               Disabled
             </Text>
             <Input disabled defaultValue="Can't edit me" />

package/src/ui/Input.tsx

@@ -10,9 +10,9 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, leftIcon, rightIcon, id, ...props }, ref) => {
     const inputClasses = cn(
-      "block w-full rounded-md border-0 px-1.5 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6 bg-primary/10 appearance-none",
-      leftIcon && "pl-10",
-      rightIcon && "pr-10",
+      "pb:block pb:w-full pb:rounded-md pb:border-0 pb:px-1.5 pb:py-1.5 pb:text-gray-900 pb:shadow-sm pb:ring-1 pb:ring-inset pb:ring-gray-300 pb:placeholder:text-gray-400 pb:focus:ring-2 pb:focus:ring-inset pb:focus:ring-primary pb:sm:text-sm pb:sm:leading-6 pb:bg-primary/10 pb:appearance-none",
+      leftIcon && "pb:pl-10",
+      rightIcon && "pb:pr-10",
       className,
     );
 
@@ -23,16 +23,16 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     }
 
     return (
-      <div className="relative">
+      <div className="pb:relative">
         {leftIcon && (
-          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-            <span className="text-gray-500 sm:text-sm">{leftIcon}</span>
+          <div className="pb:pointer-events-none pb:absolute pb:inset-y-0 pb:left-0 pb:flex pb:items-center pb:pl-3">
+            <span className="pb:text-gray-500 pb:sm:text-sm">{leftIcon}</span>
           </div>
         )}
         <BaseInput ref={ref} id={id} className={inputClasses} {...props} />
         {rightIcon && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-            <span className="text-gray-500 sm:text-sm">{rightIcon}</span>
+          <div className="pb:pointer-events-none pb:absolute pb:inset-y-0 pb:right-0 pb:flex pb:items-center pb:pr-3">
+            <span className="pb:text-gray-500 pb:sm:text-sm">{rightIcon}</span>
           </div>
         )}
       </div>

package/src/ui/Label.stories.tsx

@@ -19,18 +19,18 @@ export const Default: Story = {};
 
 export const Variations: Story = {
   render: () => (
-    <div className="flex flex-col gap-12 p-4">
-      <div className="space-y-2">
-        <Text variant="small" className="font-bold underline uppercase">
+    <div className="pb:flex pb:flex-col pb:gap-12 pb:p-4">
+      <div className="pb:space-y-2">
+        <Text variant="small" className="pb:font-bold pb:underline pb:uppercase">
           With Tooltip
         </Text>
         <Label tooltip="Extra information here.">Hover the help icon</Label>
       </div>
-      <div className="space-y-2">
-        <Text variant="small" className="font-bold underline uppercase">
+      <div className="pb:space-y-2">
+        <Text variant="small" className="pb:font-bold pb:underline pb:uppercase">
           With Associated Input
         </Text>
-        <div className="space-y-1">
+        <div className="pb:space-y-1">
           <Label htmlFor="v-input" tooltip="This is required">
             Email Address
           </Label>

package/src/ui/Label.tsx

@@ -12,12 +12,12 @@ export function Label({ children, tooltip, className, ...props }: LabelProps) {
   return (
     <label
       className={cn(
-        "relative block text-sm font-bold leading-6 text-gray-600 mb-1 group-focus-within:text-gray-800",
+        "pb:relative pb:block pb:text-sm pb:font-bold pb:leading-6 pb:text-gray-600 pb:mb-1 pb:group-focus-within:text-gray-800",
         className,
       )}
       {...props}
     >
-      <div className="flex items-center gap-1">
+      <div className="pb:flex pb:items-center pb:gap-1">
         {children}
         {tooltip && <HelperTooltip content={tooltip} />}
       </div>

package/src/ui/NumberField.stories.tsx

@@ -27,8 +27,8 @@ export const Default: Story = {
 const InteractiveExample = (args: React.ComponentProps<typeof NumberField>) => {
   const [value, setValue] = useState<number | null>(args.defaultValue ?? 10);
   return (
-    <div className="space-y-2">
-      <div className="max-w-[200px]">
+    <div className="pb:space-y-2">
+      <div className="pb:max-w-[200px]">
         <NumberField
           {...args}
           value={value}
@@ -42,20 +42,20 @@ const InteractiveExample = (args: React.ComponentProps<typeof NumberField>) => {
 
 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">
+    <div className="pb:flex pb:flex-col pb:gap-12 pb:p-4">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Configuration
         </Heading>
-        <div className="grid gap-8">
-          <div className="space-y-2">
-            <Text variant="small" className="font-bold">
+        <div className="pb:grid pb:gap-8">
+          <div className="pb:space-y-2">
+            <Text variant="small" className="pb:font-bold">
               With Buttons & Large Step
             </Text>
             <NumberField showButtons defaultValue={50} step={10} />
           </div>
-          <div className="space-y-2">
-            <Text variant="small" className="font-bold">
+          <div className="pb:space-y-2">
+            <Text variant="small" className="pb:font-bold">
               Small Step (0.1) & Limits (0-1)
             </Text>
             <NumberField
@@ -66,8 +66,8 @@ export const Variations: Story = {
               max={1}
             />
           </div>
-          <div className="space-y-2">
-            <Text variant="small" className="font-bold">
+          <div className="pb:space-y-2">
+            <Text variant="small" className="pb:font-bold">
               Disabled
             </Text>
             <NumberField disabled defaultValue={123} />
@@ -75,8 +75,8 @@ export const Variations: Story = {
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Heading level={4} className="text-sm font-medium text-black uppercase">
+      <div className="pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
           Interactive State
         </Heading>
         <InteractiveExample showButtons={true} />

package/src/ui/NumberField.tsx

@@ -41,7 +41,7 @@ export const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(
     const numberId = propsId || generatedId;
 
     return (
-      <div className="w-full">
+      <div className="pb:w-full">
         <BaseNumberField.Root
           ref={ref}
           value={value}
@@ -57,19 +57,19 @@ export const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(
           }}
           disabled={disabled}
           readOnly={readOnly}
-          className={cn("flex flex-col gap-1", className)}
+          className={cn("pb:flex pb:flex-col pb:gap-1", className)}
           {...props}
         >
           <div
             className={cn(
-              "group relative flex items-center rounded-md border-0 bg-primary/10 ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary shadow-sm",
-              disabled && "opacity-50 cursor-not-allowed",
+              "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",
             )}
           >
             {showButtons && (
               <BaseNumberField.Decrement
                 aria-label="Decrement"
-                className="relative z-20 flex items-center justify-center w-8 h-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100/50 rounded-l-md border-r border-gray-300 disabled:opacity-30 cursor-pointer"
+                className="pb:relative pb:z-20 pb:flex pb:items-center pb:justify-center pb:w-8 pb:h-9 pb:text-gray-500 pb:hover:text-gray-700 pb:hover:bg-gray-100/50 pb:rounded-l-md pb:border-r pb:border-gray-300 disabled:pb:opacity-30 pb:cursor-pointer"
               >
                 <Icon size="sm">
                   <path
@@ -85,15 +85,15 @@ export const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(
               id={numberId}
               placeholder={placeholder}
               className={cn(
-                "block w-full bg-transparent border-0 px-3 py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6 text-center appearance-none relative z-0",
-                !showButtons && "rounded-md",
+                "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",
               )}
             />
 
             {showButtons && (
               <BaseNumberField.Increment
                 aria-label="Increment"
-                className="relative z-20 flex items-center justify-center w-8 h-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100/50 rounded-r-md border-l border-gray-300 disabled:opacity-30 cursor-pointer"
+                className="pb:relative pb:z-20 pb:flex pb:items-center pb:justify-center pb:w-8 pb:h-9 pb:text-gray-500 pb:hover:text-gray-700 pb:hover:bg-gray-100/50 pb:rounded-r-md pb:border-l pb:border-gray-300 disabled:pb:opacity-30 pb:cursor-pointer"
               >
                 <Icon size="sm">
                   <path
@@ -105,7 +105,7 @@ export const NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(
               </BaseNumberField.Increment>
             )}
 
-            <BaseNumberField.ScrubArea className="absolute inset-0 z-10 cursor-ew-resize opacity-0 hover:opacity-10 transition-opacity bg-primary/5 rounded-md pointer-events-none group-hover:pointer-events-auto" />
+            <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.Root>
       </div>

package/src/ui/Popover.tsx

@@ -28,12 +28,12 @@ export function Popover({
         <BasePopover.Positioner side={side} align={align} sideOffset={5}>
           <BasePopover.Popup
             className={cn(
-              "z-50 w-72 rounded-md border bg-white p-4 shadow-md outline-none 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",
+              "pb:z-50 pb:w-72 pb:rounded-md pb:border pb:bg-white pb:p-4 pb:shadow-md pb:outline-none pb:data-[state=open]:animate-in pb:data-[state=closed]:animate-out pb:data-[state=closed]:fade-out-0 pb:data-[state=open]:fade-in-0 pb:data-[state=closed]:zoom-out-95 pb:data-[state=open]:zoom-in-95",
               className,
             )}
           >
             {children}
-            <BasePopover.Arrow className="fill-white stroke-gray-200" />
+            <BasePopover.Arrow className="pb:fill-white pb:stroke-gray-200" />
           </BasePopover.Popup>
         </BasePopover.Positioner>
       </BasePopover.Portal>